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

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

for (let codePoint of 'foo') {

  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 = 'Hello world!';

s.startsWith('Hello') // true

s.endsWith('!') // true

s.includes('o') // true

　

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

var s = 'Hello world!';

s.startsWith('world', 6) // true

s.endsWith('Hello', 5) // true

s.includes('Hello', 6) // false

　

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

1.3. padStart(), padEnd()

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

'x'.padStart(5, 'ab') 

// 'ababx'

'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'

'x'.padEnd(4, 'ab') // 'xaba'

　

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

'1'.padStart(10, '0') 

// "0000000001"

'12'.padStart(10, '0') // "0000000012"

'123456'.padStart(10, '0') // "0000123456"

另一个用途

　

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

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"

'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

　

1.4. Template string

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

$('#result').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 중국어 웹사이트의 기타 관련 기사를 참조하세요!