JavaScript文字列補間：初心者向けガイド

JavaScript文字列補間は、文字列の一部に式を埋め込むプロセスです。テンプレートリテラルは、式を埋め込むために使用されます。補間を使用して、変数や数学計算などの値を文字列に追加できます。

JavaScript文字列内に値を追加する必要がありますか？テンプレートリテラル構文について説明しました。テンプレートリテラルを使用すると、複数行の文字列を簡単に操作したり、JavaScript文字列内に値を埋め込んだりできます。テンプレートリテラルは、JavaScriptの文字列補間構文です。

このガイドでは、JavaScriptの文字列補間について説明します。それが何であるか、どのように機能するかについて説明し、文字列補間の例を見ていきます。

面倒なことはせずに始めましょう！

JavaScript文字列補間

テンプレートリテラルを使用して、JavaScript文字列に値を追加できます。これはドル記号の後に中括弧のペアが続きます。中括弧内には、文字列に値を埋め込む式を含める必要があります。

テンプレートリテラルを使用すると、連結に依存せずに値を文字列に埋め込むことができます。テンプレートリテラルを宣言するには、文字列を引用符ではなくバックティック（ "）で囲む必要があります。

次の構文を検討してください。

`This is a string. Here is the value of 9 + 10: ${9 + 10}.`

テンプレートリテラルを宣言しました。私たちの表現は：

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

${9 + 10}

この式は9+10と評価されます。この式の結果は、終止符の前の文字列の最後に追加されます。これは、終止符の前に式を記述したためです。

JavaScript文字列補間の例

テンプレートリテラルを使用すると、値を文字列に直接埋め込むことができます。このコードを検討してください：

const address_number = "10 Downing Street";
const prime_minister_address = `The Prime Minister's address is ${address_number}.`;
console.log(prime_minister_address)

コードの最初の行は、首相の住所番号を定義します。次に、テンプレートリテラルを使用して完全なアドレスを作成します。 $ {}構文は、文字列に値を埋め込むために使用されます。文字列に「address_number」の値を追加しました。

コードを実行してみましょう：

The Prime Minister's address is 10 Downing Street

コードは2つの文字列をマージしました。

テンプレートリテラルを使用している場合は、リテラル内に任意の値を埋め込むことができます。これには、文字列、数値、またはJavaScriptの数学計算の結果が含まれます。テンプレートリテラル内にテンプレートリテラルを埋め込む必要はありません。

文字列リテラルの主な利点の1つは、構文が明確であることです。 JavaScriptコードを文字列に直接埋め込むことができます。

連結を使用して文字列をマージする

連結を使用して文字列をマージできます。 2つの文字列があるとしましょう：

const full_address = `The Prime Minister's address is `;
const address_number = `10 Downing Street`;

プラス記号（+）を使用して2つの文字列を連結できます：

const prime_minister_address = full_address + address_number + ".";
console.log(prime_minister_address);

JavaScriptコンソールは次の値を出力します：

The Prime Minister's address is 10 Downing Street

2つの文字列を組み合わせた文字列を正常に作成しました。最後に、連結演算子を使用して、文に終止符（ "。"）を追加します。

ただし、この構文には欠点があります。文字列の最後にしか値を追加できないということです。これが、テンプレートリテラル構文の導入の背後にある大きな理由です。文字列の途中に値を追加するのが簡単になりました。

文字列補間JavaScript：計算

テンプレートリテラル内のコードはJavaScriptステートメントです。これは、テンプレートリテラルを使用して計算を実行し、それらの値をプログラムに埋め込むことができることを意味します。

カフェでの2杯の飲み物の価格を計算し、その結果を文字列内に配置する文字列を作成しましょう。

var drink1 = 2.30;
var drink2 = 2.20;

var bill = `The total cost of your drinks is $${drink1 + drink2}.`;

$ {}構文内に、計算を追加しました。この計算では、2つのJavaScript変数の値が合計されます。変数はdrink1（2.30）とdrink2（2.20）です。このコードは、これらの値の合計を含む文字列を返します。

The total cost of your drinks is $4.50.

文字列補間JavaScript：三項演算子

JavaScriptの三項演算子を使用すると、ステートメントがTrueかFalseかを評価できます。これらは、ifステートメントを記述するためのより簡潔な方法です。三項演算子は、 ifの結果が ステートメントは1行のコードのみを使用します。

顧客がコーヒーに4.00ドル以上を費やしている場合は、請求書を提示する必要があります。次に、コーヒーポイントカードクラブに参加するように依頼する必要があります。それ以外の場合は、請求書を提示するだけです。三項演算子を使用して、顧客の請求書のコストを確認できます。

var drink1 = 2.30;
var drink2 = 2.20;
var total = drink1 + drink2;

var bill = `The total cost of your drinks is $${total}. ${total > 4.00 ? "Would you like to join our coffee club? It will earn you a free coffee for every ten that you buy." : ""}`;
console.log(bill);

テンプレートリテラルには、2つの埋め込み式が含まれています。まず、文字列内に「total」の値を埋め込みます。次に、三項演算子を使用して、顧客に喫茶店のポイントカードクラブへの参加を依頼する必要があるかどうかを確認します。

合計購入価格が$4.00を超える場合、次のメッセージがコンソールに出力されます。

The total cost of your drinks is $4.50. Would you like to join our coffee club? It will earn you a free coffee for every ten that you buy.

それ以外の場合、三項演算子はコロン（“：”）の後に値を返します。これは、式がFalseと評価されたときに返される値です。

この例では、コロンの後の値は空の文字列です。これは、顧客の購入が$ 4.00未満の場合、テンプレートリテラルの最初の文のみが返されることを意味します：

The total cost of your drinks is $4.50.

結論

テンプレートリテラルを使用すると、文字列内に値を埋め込むことができます。テンプレートリテラル内で計算を実行できます。バッククォートを使用してテンプレートリテラルを宣言します。評価するステートメントは、ドル記号と、ステートメントが表示される中括弧のペアで示されます。

JavaScriptの詳細については、JavaScriptの学習方法ガイドをご覧ください。