ES6 テンプレート文字列の例の共有

小云云
リリース: 2018-01-26 16:44:12
オリジナル
1781 人が閲覧しました

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 数値と文字列間の相互変換の詳細な説明

一般的な JS インターセプト文字列メソッドのコレクション

ajax json と文字列をスプライスする jquery メソッド

以上がES6 テンプレート文字列の例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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