JavaScript で文字列と整数を連結する

JavaScript で Web アプリケーションを開発するときはいつでも、任意のタイプ（整数、浮動小数点数など）の変数を文字列と連結したいという状況に常に遭遇します。これは一般的なシナリオです。

この記事では、テンプレート文字列機能と+ 演算子を使用して、JavaScript で文字列値を整数値と連結する方法について説明します。

JavaScript のテンプレート文字列を使用して文字列と整数を連結する

JavaScript のテンプレート文字列を使用すると、指定された文字列値内に任意のタイプの変数を追加できます。バックティック（`）文字はテンプレート文字列を表します。

したがって、この機能を使用するには、文字列をバックティック文字で囲む必要があります。

ここでは、従来の二重引用符演算子（" "）は使用しません。テンプレート文字列は、テンプレートリテラルとも呼ばれます。

テンプレート文字列機能は、ES6 バージョンの JavaScript で導入されました。

以下に示すように、文字列と、値が 8 の整数変数 value があるとします。変数 value の値を文字列と連結して、コンソールに出力することを目的としています。

コードスニペット-JavaScript：

let value = 8;
console.log('Number is the value.');

出力：

Number is the value.

これを行うには、まず、文字列の二重引用符（" "）をバックティック文字（`）に置き換える必要があります。

文字列をバッククォートで囲んだ後、文字列内の任意の場所に変数 value を連結または挿入できます。このためには、${} を使用する必要があります。

そして、この中に、以下に示すように、変数 ${value} を追加します。

コードスニペット-JavaScript：

let value = 8;
console.log(`Number ${value} is the value.`);

出力：

Number 8 is the value.

ご覧のとおり、値 8 が文字列内に出力されます。文字列を変数と連結する場合は常に、文字列リテラルの概念を使用します。

同様に、この機能を使用して、文字列に任意のタイプを持つ多くの変数を連結できます。

JavaScript で+ 演算子を使用して文字列と整数を連結する

JavaScript の+ 演算子は、文字列を整数と連結することもできます。上で見たのと同じ例を取り上げますが、テンプレート文字列の代わりに+ 演算子を使用します。

コードスニペット-JavaScript：

let value = 8;
console.log('Number ' + value + ' is the value.');

出力：

Number 8 is the value.

ここでは、文字列に従来の二重引用符を使用する必要があり、整数変数 value を文字列と連結する位置で、最初に二重引用符を閉じる必要があります。次に、変数 value の前後に+ 演算子を使用します。

この後、上記のように、二重引用符を使用して残りの文字列を再度続行できます。

+ 演算子を使用する場合の唯一の問題は、文字列間で多くの変数を連結する場合、以下に示すように、複数の+ 演算子を使用して文字列を分離する必要があることです。

文字列と連結したい変数がたくさんある場合、コードを読んで理解するときに問題が発生する可能性があります。

コードスニペット-JavaScript：

let value1 = 8;
let value2 = 16;
let value3 = 24;

console.log('Table of ' + value1 + ' has values ' + value2 + ' and ' + value3);

出力：

Table of 8 has values 16 and 24

したがって、ES6 のテンプレートリテラル機能を可能な限り使用することを常にお勧めします。また、文字列と連結する必要のある変数が非常に少ない場合は、+ 演算子を使用できます。