ホームページ >ウェブフロントエンド >jsチュートリアル >ES6 テンプレート文字列の例の共有
ES6 で導入された新しいタイプの文字列リテラル構文 - テンプレート文字列。技術的に説明すると、テンプレート文字列は、文字列リテラル内に式を埋め込む文字列リテラルです。簡単に言うと文字列に変数機能を追加したものです。
ES6 はテンプレート文字列を提供し、構文はバックティックを使用します。テンプレート文字列には次の 3 つの利点があります:
複数行のテキスト
文字列への変数の挿入
文字列への式の挿入
テンプレート文字列と ES5文字列宣言は同じ。
// ES5 var name = 'xixi'; console.log(name);// xixi // ES6 let name4ES6 = `一步`; console.log(name4ES6);// 一步複数行テキスト
Jqueryが普及していた時代には、HTMLの断片をつなぎ合わせてノードを置き換えることがよくありました。誰もが体験できるように ES5 コードを書きます:
var str = '<html>' + '<p>啦拉拉</p>' + '<p>xixixi</p>' + '</html>'; console.log(str);// <html><p>啦拉拉</p><p>xixixi</p></html>ES6 は複数行のテキストをサポートしており、上記のコードは実装がはるかに簡単です。
let str4ES6 = `<html> <p>啦拉拉</p> <p>xixixix</p> </html>`; console.log(str4ES6);変数または式を挿入できます
// ES5 var name = 'xixi'; var age = 27; var info = 'my name is ' + name + ' , age is ' + age + '.'; console.log(info);// my name is xixi , age is 27.
ES6 テンプレート文字列の実装ははるかに簡単です。重要な構文は ${} で、任意の js 式を挿入できます。
let name = 'xixi'; let age = 27; let info = `my name is ${name}, my age is ${age}. just a test ${1 + 10}!`; console.log(info);// my name is xixi, my age is 27. just a test 11!概要 ES6 テンプレート文字列は非常にシンプルで使いやすいです。 関連する推奨事項:
JS 数値と文字列間の相互変換の詳細な説明
ajax json と文字列をスプライスする jquery メソッド
以上がES6 テンプレート文字列の例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。