Summary of high-frequency usage of ES6 string extensions

ES6 Adds a traverser interface for strings so that strings can be traversed for...of in a loop.

for (let codePoint of 'foo') {

  console.log(codePoint)}

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

　

1.1. Example: Traverse a JSON Data

 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

　

}

Above example , which we often use. Before, we used loops like for i++ to obtain data, but now, we can directly use for of Reduce workload and improve work efficiency

1.2. includes(), startsWith(), endsWith()

Traditionally, JavaScript has only the indexOf method, which can be used to determine whether a string is contained within another string. ES6 provides three new methods.

• includes(): Returns a Boolean value indicating whether the parameter string is found.

• startsWith(): Returns a Boolean value indicating whether the parameter string is at the head of the source string.

• endsWith(): Returns a Boolean value indicating whether the parameter string is at the end of the source string.

var s = 'Hello world!';

s.startsWith('Hello') // true

s.endsWith('!') // true

s.includes('o') // true

　

All three methods support a second parameter, indicating the starting position of the search.

var s = 'Hello world!';

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

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

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

　

The above code indicates that when the second parameter n is used, endsWith The behavior is different from the other two methods. It targets the first n characters, while the other two methods target from the nth position until the end of the string.

1.3. padStart(), padEnd()

ES2017 Introduced strings Function to complete the length. If a string is not long enough, it will be completed at the head or tail. padStart() is used for head completion, padEnd() is used for tail completion.

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

// 'ababx'

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

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

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

　

A common use of

padStart is to specify the number of digits for numeric completion. The following code generates a numerical string of 10 digits.

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

// "0000000001"

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

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

另一个用途

　

is the prompt string format.

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

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

　

1.4. Template string

Traditional JavaScript language, the output template is usually written like this.

$('#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;);

　

The above writing method is quite cumbersome and inconvenient. ES6Introduces template strings to solve this problem.

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 (template string) is an enhanced version of string, Use backticks (`) to identify . It can be used as an ordinary string, or it can be used to define multi-line strings, or embed variables in strings.

All spaces and newlines in the template string are preserved. If you don't want this line break, you can use the trim method to eliminate it.

The above is the detailed content of Summary of high-frequency usage of ES6 string extensions. For more information, please follow other related articles on the PHP Chinese website!