導入
ES6 (ECMAScript 2015) では、多くの新しい言語機能が導入されており、その 1 つはテンプレート文字列です。テンプレート文字列は、文字列の連結と変数の挿入を処理するためのより便利で柔軟な方法を提供します。この記事では、ES6 テンプレート文字列の基本的な構文と一般的な使用法について説明します。
第 1 章: 基本文法
ES6 テンプレート文字列では、バッククォート ( ）来定义字符串。在模板字符串中，我们可以使用${}` 構文を使用して変数または式を文字列に挿入します。基本的なテンプレート文字列の例を次に示します。
const name = 'Alice';
const age = 25;
const message = `My name is ${
name} and I am ${
age} years old.`;
console.log(message);
上の例では、文字列に挿入する変数${}sumを使用しました。変数を出力すると、出力が得られます。nameagemessageMy name is Alice and I am 25 years old.
第 2 章: 複数行の文字列
\n従来の文字列連結では通常、改行文字を使用する必要があります。テンプレート文字列では、改行を直接使用して複数行の文字列を作成し、コードを読みやすくすることができます。複数行の文字列を使用した例を次に示します。
const message = `
Hello,
Welcome to our website.
Have a nice day!
`;
console.log(message);
上記の例で、backtick ( ）将多行字符串括起来，并直接在字符串中使用换行符。当我们打印message` 変数を使用すると、次が出力されます。
Hello,
Welcome to our website.
Have a nice day!
第 3 章: 文字列操作
テンプレート文字列は、変数の挿入や複数行の文字列の作成に加えて、文字列のインターセプト、大文字または小文字への変換など、他の文字列操作もサポートします。一般的な文字列操作の例をいくつか示します。
const str = 'Hello, world!';
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('!')); // true
console.log(str.includes('world')); // true
console.log(str.toUpperCase()); // HELLO, WORLD!
console.log(str.toLowerCase()); // hello, world!
console.log(str.slice(7)); // world!
console.log(str.substring(7, 12)); // world
console.log(str.substr(7, 5)); // world
上記の例では、 や などのいくつかの一般的な文字列操作メソッドを使用して、文字startsWith列の先頭、末尾、および包含関係を決定しました。文字列を大文字または小文字に変換するために使用されます。、および文字列の一部をインターセプトするために使用されます。endsWithincludestoUpperCasetoLowerCaseslicesubstringsubstr
結論は
ES6 のテンプレート文字列は、文字列の連結と変数の挿入を処理するためのより便利で柔軟な方法を提供します。構文を使用して${}、文字列に変数や式を挿入したり、複数行の文字列を作成したり、一般的な文字列操作を実行したりできます。この記事が ES6 テンプレート文字列の理解と使用に役立つことを願っています。
以上がES6テンプレート文字列の使い方に関する記事の内容です。お役に立てれば！
参考リンク: