ホームページ > 記事 > ウェブフロントエンド > ES6 テンプレート文字列の例の共有

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

小云云オリジナル: 2018-01-26 16:44:121766ブラウズ

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 テンプレート文字列は非常にシンプルで使いやすいです。

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

関連記事