ES6 문자열 확장의 빈번한 사용 요약-JS 튜토리얼-php.cn

ES6 문자열 확장의 빈번한 사용 요약

PHP中文网

풀어 주다： 2017-06-19 17:28:42

원래의

1728명이 탐색했습니다.

ES6에는 문자열에 대한 순회 인터페이스가 추가되어 for...of 루프로 문자열을 순회할 수 있습니다.

for (let codePoint of &#39;foo&#39;) {

  console.log(codePoint)}

// "f"// "o"// "o"

로그인 후 복사

1.1. 예: JSONdata

 function lettest()

        {

              var jsongs = {

                    "result": [

                        { "YDFLAG": "1", "YXS": "0", "DPMC": "专属好评率", "MTYDL": "100", "SPFLMC": "蔬菜", "SPMC": "萝卜丝包", "YDRQ": "[2,1]", "PIC_ID": "12918", "SPDJ": "5", "YDBID": "12919", "NUM": "1", "SPJBXX_ID": "12913" },

                        { "YDFLAG": "2", "YXS": "0", "DPMC": "专属好评率", "MTYDL": "100", "SPFLMC": "蔬菜", "SPMC": "肉包", "YDRQ": "[5]", "PIC_ID": "12911", "SPDJ": "5", "YDBID": "12912", "NUM": "2", "SPJBXX_ID": "12907" },

                        { "YDFLAG": "3", "YXS": "0", "DPMC": "专属好评率", "MTYDL": "100", "SPFLMC": "蔬菜", "SPMC": "馒头", "YDRQ": "[4]", "PIC_ID": "12905", "SPDJ": "3", "YDBID": "12906", "NUM": "3", "SPJBXX_ID": "12900" },

                        { "YDFLAG": "4", "YXS": "0", "DPMC": "专属好评率", "MTYDL": "100", "SPFLMC": "蔬菜", "SPMC": "菜包", "YDRQ": "[2,3]", "PIC_ID": "12889", "SPDJ": "4", "YDBID": "12890", "NUM": "4", "SPJBXX_ID": "12884" }

                    ], "signToken": "/v1VqtzUE01JnOFJlHwnXu/IMKsjHL820hMdDHobFJPaE4R8D/VY3Q==", "allNum": "4"

                };

            for (var i of jsongs.result) {

              console.log(i.SPMC);

            }

        //商品名称：萝卜丝包,YDFLAG:1

// 商品名称：肉包,YDFLAG:2

// 商品名称：馒头,YDFLAG:3

// 商品名称：菜包,YDFLAG:4

로그인 후 복사

탐색

}

위 예시는 우리가 자주 사용하는 예시인데, Before , for i++과 같은 루프를 사용하여 데이터를 얻었지만 이제는 for of 를 직접 사용하여 작업량을 줄이고 작업 효율성을 높일 수 있습니다

1.2 includes( ), startWith( ), endWith()

전통적으로 JavaScript에는 문자열이 다른 문자열에 포함되어 있는지 확인하는 데 사용할 수 있는 indexOf 메서드만 있습니다. ES6은 세 가지 새로운 방법을 제공합니다.

includes(): 매개변수 문자열이 발견되었는지 여부를 나타내는 부울 값을 반환합니다.
startsWith(): 매개변수 문자열이 소스 문자열의 선두에 있는지 여부를 나타내는 부울 값을 반환합니다.
endsWith(): 매개변수 문자열이 소스 문자열의 끝에 있는지 여부를 나타내는 부울 값을 반환합니다.

var s = &#39;Hello world!&#39;;

s.startsWith(&#39;Hello&#39;) // true

s.endsWith(&#39;!&#39;) // true

s.includes(&#39;o&#39;) // true

로그인 후 복사

이 세 가지 방법은 모두 검색을 시작할 위치를 나타내는 두 번째 매개 변수를 지원합니다.

var s = &#39;Hello world!&#39;;

s.startsWith(&#39;world&#39;, 6) // true

s.endsWith(&#39;Hello&#39;, 5) // true

s.includes(&#39;Hello&#39;, 6) // false

로그인 후 복사

위 코드는 두 번째 매개변수 n을 사용할 때 endsWith의 동작이 다른 두 메서드와 다르다는 것을 나타냅니다. 첫 번째 n 문자를 대상으로 하는 반면, 다른 두 가지 방법은 n 번째 위치부터 문자열 끝까지를 대상으로 합니다.

1.3. padStart(), padEnd()

ES2017 문자열 완성 길이 기능을 도입했습니다. 문자열이 충분히 길지 않으면 머리나 꼬리에서 완성됩니다. padStart()는 머리 완성에 사용되고, padEnd()는 꼬리 완성에 사용됩니다.

&#39;x&#39;.padStart(5, &#39;ab&#39;) 

// &#39;ababx&#39;

&#39;x&#39;.padStart(4, &#39;ab&#39;) // &#39;abax&#39;

&#39;x&#39;.padEnd(5, &#39;ab&#39;) // &#39;xabab&#39;

&#39;x&#39;.padEnd(4, &#39;ab&#39;) // &#39;xaba&#39;

로그인 후 복사

padStart의 일반적인 용도는 숫자 완성을 위한 자릿수를 지정하는 것입니다. 다음 코드는 10자리 숫자 문자열을 생성합니다.

&#39;1&#39;.padStart(10, &#39;0&#39;) 

// "0000000001"

&#39;12&#39;.padStart(10, &#39;0&#39;) // "0000000012"

&#39;123456&#39;.padStart(10, &#39;0&#39;) // "0000123456"

另一个用途

로그인 후 복사

은 프롬프트 문자열 형식입니다.

&#39;12&#39;.padStart(10, &#39;YYYY-MM-DD&#39;) // "YYYY-MM-12"

&#39;09-12&#39;.padStart(10, &#39;YYYY-MM-DD&#39;) // "YYYY-09-12"

로그인 후 복사

1.4. Template string

전통적인 JavaScript 언어에서 출력 템플릿은 일반적으로 다음과 같이 작성됩니다.

$(&#39;#result&#39;).append(

  &#39;There are <b>&#39; + basket.count + &#39;</b> &#39; +

  &#39;items in your basket, &#39; +

  &#39;<em>&#39; + basket.onSale +

  &#39;</em> are on sale!&#39;);

로그인 후 복사

위의 작성 방법은 상당히 번거롭고 불편합니다. ES6에서는 이 문제를 해결하기 위해 템플릿 문자열을 도입했습니다.

function resulttemplate()

        {

            var basket = { "supplies": [{ "name": "张三" }, { "name": "李四" }, { "name": "lili" }] }

            var mess = `<table>`;

            for (var i = 0; i < basket.supplies.length; i++)

            {

                mess += `<tr><td> 姓名</td>

                    <td> ${basket.supplies[i].name}</td></tr>`;

            }

            mess += `</table>`;

            $(&#39;#result&#39;).append(mess);

var ddd=`<table>`;

for(let j of basket.supplies)

{

     ddd+=`<tr><td>${j.name}</td></tr>`;

}

ddd+=`</table>`;

console.log(ddd);

        }

로그인 후 복사

템플릿 문자열(template string)은 문자열의 향상된 버전이며, 은 백틱(`) 으로 표시됩니다. 일반 문자열로 사용할 수도 있고 여러 줄 문자열을 정의하거나 문자열에 변수를 삽입하는 데 사용할 수도 있습니다.

템플릿 문자열의 모든 공백과 줄 바꿈은 유지됩니다. 이 줄 바꿈을 원하지 않으면 trim 방법을 사용하여 제거할 수 있습니다.

위 내용은 ES6 문자열 확장의 빈번한 사용 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!