ES6 字串的擴展的高頻用法總結-js教程-PHP中文網

ES6 字串的擴展的高頻用法總結

PHP中文网

發布： 2017-06-19 17:28:42

原創

1727 人瀏覽過

ES6為字串新增了遍歷器接口，使得字串可以被for...of循環遍歷。

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

  console.log(codePoint)}

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

登入後複製

1.1. 範例：遍歷一個JSON 資料

 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

登入後複製

}

#上面範例範例，是我們常用到的，之前我們都是使用for i++這樣的循環來獲取數據，而現在，我們直接可以使用for of #來減少工作量，提高工作效率

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

傳統上，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. 範本字串

#傳統的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中文網其他相關文章！