JavaScript で文字列補間を行う
Kirill Ibrahim
2023年10月12日
JavaScript には文字列補間という素晴らしい機能があり、変数や関数呼び出し、演算式を文字列に直接注入することができます。
この記事では、文字列補間を行う方法を紹介します。以下にコード例を示しますので、お使いのマシンで実行してみてください。
JavaScript で ES6 の新機能を使用して文字列補間を行う
ES6 がリリースされる前は、JavaScript では文字列補間機能がありませんでした。この機能がなかったため、以下のような文字列連結コードが発生していました。
例を示する
const generalInformation = (firstName, lastName, Country) => {
return 'First Name ' + firstName + ' Last Name: ' + lastName + '. ' +
Country + ' is my country.';
} console.log(generalInformation('Mark', 'John', 'US'));
出力：
First Name Mark Last Name: John. US is my country.
文字列補間は、複数行文字列の連結やエスケープ文字を使わずに、変数や関数呼び出し、算術式を直接文字列に注入できる機能です。
文字列補間ではテンプレートリテラルにバックティックを使用し、変数や関数呼び出し、算術式のような動的な値を挿入するには、フォーマット - ${ourValue} を使用します。
例：
const generalInformation = (firstName, lastName, Country) => {
return `First Name: ${firstName} Last Name: ${lastName}. Country: ${Country}`;
} console.log(generalInformation('Mark', 'John', 'US'));
出力：
First Name: Mark Last Name: John. Country: US
これで文字列補間がいかに素晴らしい機能であるかがわかりました。
例
関数呼び出しと算術式を注入してみましょう。
const generalInformation = (firstName, lastName, Country) => {
return `First Name: ${firstName} Last Name: ${lastName}. Country: ${Country}`;
} console.log(generalInformation('Mark', 'John', 'US'));
console.log(`${generalInformation("Mark", "John", "US")} He is a Worker in our company.`);
console.log(`sum of 10 and 6 is ${10+6}.`);
出力：
First Name: Mark Last Name: John. Country: US
First Name: Mark Last Name: John. Country: US He is a Worker in our company.
sum of 10 and 6 is 16.
例
文字列補間で条件文を使用できます。
const isEvenOrOdd = (num) => {
console.log(`Number is ${num % 2 === 0 ? 'even' : 'odd'}`);
} isEvenOrOdd(5);
isEvenOrOdd(8);
出力：
Number is odd
Number is even