ホームページ > ウェブフロントエンド > jsチュートリアル > ES6 文字列拡張の高頻度使用の概要

ES6 文字列拡張の高頻度使用の概要

PHP中文网
リリース: 2017-06-19 17:28:42
オリジナル
1728 人が閲覧しました

ES6 は文字列のトラバーサー インターフェイスを追加し、文字列を for...of ループで走査できるようにします。

for (let codePoint of 'foo') {

  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を直接使用して作業負荷を軽減し、作業効率を向上させることができます

1.2. )、endsWith()

伝統的に、JavaScript

には、文字列が別の文字列に含まれているかどうかを判断するために使用できる

indexOfメソッドしかありません。 ES6 は 3 つの新しいメソッドを提供します。

includes()
  • : パラメータ文字列が見つかったかどうかを示すブール値を返します。

    startsWith()
  • : パラメータ文字列がソース文字列の先頭にあるかどうかを示すブール値を返します。

    endsWith()
  • : パラメータ文字列がソース文字列の最後にあるかどうかを示すブール値を返します。

    var s = 'Hello world!';
    
    s.startsWith('Hello') // true
    
    s.endsWith('!') // true
    
    s.includes('o') // true
    ログイン後にコピー

これら 3 つのメソッドはすべて、検索を開始する位置を示す 2 番目のパラメーターをサポートしています。

var s = 'Hello world!';

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

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

s.includes('Hello', 6) // false
ログイン後にコピー

上記のコードは、2 番目のパラメーター

n

を使用する場合、

endsWith の動作が他の 2 つのメソッドとは異なることを示しています。これは最初の n 文字をターゲットとしますが、他の 2 つのメソッドは 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.

テンプレート文字列

従来の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);

        }
ログイン後にコピー
テンプレート文字列(

テンプレート文字列

)は文字列の拡張版であり、

にはバッククォート(`)が付いています通常の文字列として使用することも、複数行の文字列を定義したり、文字列に変数を埋め込んだりするために使用することもできます。 テンプレート文字列内のすべてのスペースと改行は保持されます。この改行が不要な場合は、trim

メソッドを使用して削除できます。

以上がES6 文字列拡張の高頻度使用の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート