JavaScript文字列形式–JSで文字列補間を使用する方法

ECMAScript 6(ES6)にテンプレートリテラルを追加すると、JavaScriptで文字列を補間できます。

簡単に言うと、プレースホルダーを使用して変数を文字列に挿入できます。以下のスニペットで、テンプレートリテラルを使用した文字列補間の例を確認できます。

const age = 4.5; const earthAge = `Earth is estimated to be ${age} billion years old.`; console.log(earthAge); 

まず、テンプレートリテラルにバッククォートを使用していることがわかります。それに加えて、${placeholder}文字列に動的な値を挿入できるの形式もあります。内部${}はすべてJavaScriptとして評価されます。

たとえば、を書くことができEarth is estimated to be ${age + 10} billion years old.、それは私たちがしたかのように機能しconst age = 4.5 + 10;ます。

以前はどうやってやったの?

テンプレートリテラルの前は、次のように実行していました。

const earthAge = "Earth is estimated to be " + age + " billion years old."; 

ご覧のとおり、単純な文字列にはすでに多くの引用符があります。いくつかの変数を挿入する必要があると想像してください。あまり読みにくい複雑な文字列にすばやく変換できます。したがって、テンプレートリテラルは、文字列をよりクリーンで読みやすくします。

ただし、これは1つのケースにすぎません。テンプレートリテラルのその他のユースケースを見てみましょう。

複数行の文字列

テンプレート文字列のもう1つの便利な使用法は、複数行の文字列です。テンプレートリテラルの前は\n、のように新しい行に使用していましたconsole.log('line 1\n' + 'line 2')

2行の場合、これで問題ない場合があります。しかし、5行が必要だと想像してください。この場合も、文字列は不必要に複雑になります。

const earthAge = `Earth is estimated to be ${age} billion years old. Scientists have scoured the Earth searching for the oldest rocks to radiometrically date. In northwestern Canada, they discovered rocks about 4.03 billion years old. `; 

上記のスニペットは、テンプレートリテラルを使用して複数行の文字列を作成することがいかに簡単でクリーンになるかをもう一度示しています。

演習として、上記の文字列を連結と改行を使用するように変換してみてください\n

テンプレートリテラルを使用すると、文字列で式を使用することもできます。どういう意味ですか?

たとえば、2つの数値を乗算するなどの数式を使用できます。以下のスニペットは、まさにそれを示しています。

const firstNumber = 10; const secondNumber = 39; const result = `The result of multiplying ${firstNumber} by ${secondNumber} is ${firstNumber * secondNumber}.`; console.log(result); 

テンプレートリテラルがなければ、次のようなことをする必要があります。

const result = "The result of multiplying " + firstNumber + " by " + secondNumber + " is " + firstNumber * secondNumber + "."; 

上記のような文字列を書くと、すぐに複雑で混乱する可能性があります。これまで見てきたように、テンプレートリテラルを使用すると、文字列に式を簡単かつエレガントに埋め込むことができます。

三項演算子

文字列補間を使用すると、文字列内で3項演算子を使用することもできます。これにより、変数の値を確認し、その値に応じてさまざまなものを表示できます。

以下の例を見てみましょう。

const drinks = 4.99; const food = 6.65; const total = drinks + food; const result = `The total bill is ${total}. ${total > 10 ? `Your card payment will be declined` : `Your card payment will be accepted`}.` console.log(result); 

上記の例では、たとえば、合計金額が10ドルを超えているかどうかを確認します。

金額が10を超える場合は、カードでの支払いが拒否されることをユーザーに通知します。それ以外の場合は、カードでの支払いが受け付けられます。ご覧のとおり、文字列補間を使用すると、文字列を使ってクールなことができます。

結論

ES6にテンプレートリテラルを追加すると、より適切で、より短く、より明確な文字列を記述できます。また、変数と式を任意の文字列に挿入する機能も提供します。基本的に、中括弧(${})内に記述したものはすべてJavaScriptとして扱われます。

したがって、テンプレートリテラルを使用して次のことができます。

  • 複数行の文字列を書く
  • 式を埋め込む
  • 三項演算子を使用して文字列を書き込む

If you like what I write, chances are you would love what I email. Consider subscribing to my mailing list. If you're not a fan of newsletters, we can always keep in touch on Twitter.