JavaScriptで変数に文字列を代入する方法
JavaScriptで文字列を扱う場合、変数に文字列を代入する方法を理解することは基本であり、様々な場面で必要となります。ここでは、JavaScriptで変数に文字列を代入する方法について、具体例を交えながら解説していきます。
1. 文字列の基本
JavaScriptで文字列を扱う場合、シングルクォーテーション(')またはダブルクォーテーション(")で囲む必要があります。
let message1 = 'こんにちは';
let message2 = "世界";
上記のように、`message1`には「こんにちは」、`message2`には「世界」という文字列がそれぞれ代入されています。どちらのクォーテーション記号を使用しても問題ありませんが、統一することが推奨されます。
2. テンプレートリテラル
ES6から導入されたテンプレートリテラルを使うと、より柔軟に文字列を扱うことができます。特に、変数を文字列に埋め込む際に便利です。テンプレートリテラルはバッククォート(`)で囲みます。
2.1 変数の埋め込み
テンプレートリテラル内では、`${変数名}`の形式で変数を埋め込むことができます。
let name = "太郎";
let greeting = `こんにちは、${name}さん！`;
console.log(greeting); // 出力結果: こんにちは、太郎さん！
上記のように、変数`name`の値が`${name}`の部分に埋め込まれ、「こんにちは、太郎さん！」という文字列が生成されます。
2.2 式の埋め込み
テンプレートリテラル内には、変数だけでなく、式を埋め込むことも可能です。
let price = 1000;
let tax = 0.1;
let message = `合計金額は${price * (1 + tax)}円です。`;
console.log(message); // 出力結果: 合計金額は1100円です。
上記では`${price * (1 + tax)}`という式が評価され、その結果が文字列に埋め込まれています。
2.3 複数行の文字列
従来の文字列では、複数行に渡る文字列を扱う場合、改行コード(\n)を使用する必要がありました。しかし、テンプレートリテラルでは、バッククォートで囲まれた範囲内であれば、そのまま改行して記述することができます。
let message = `本日は、
晴天なり。`;
console.log(message);
// 出力結果:
// 本日は、
// 晴天なり。
3. 文字列の結合
複数の文字列を結合したい場合は、加算演算子(+)を使用します。
let firstName = "太郎";
let lastName = "山田";
let fullName = lastName + " " + firstName;
console.log(fullName); // 出力結果: 山田 太郎
4. まとめ
JavaScriptで変数に文字列を代入する方法には、シングルクォート、ダブルクォートで囲む方法と、ES6から導入されたテンプレートリテラルを使用する方法があります。テンプレートリテラルを使うことで、変数や式の埋め込み、複数行の文字列の記述などが容易になります。
参考資料
* [MDN Web Docs: テンプレートリテラル](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals)
よくある質問
Q1: シングルクォートとダブルクォートは使い分けるべきですか？
A1: どちらを使っても問題ありませんが、プロジェクト全体で統一することが推奨されます。
Q2: テンプレートリテラル内で変数名以外を表示したい場合はどうすれば良いですか？
A2: `${`と`}`で囲まれている部分以外は、そのまま文字列として扱われます。変数名以外を表示したい場合は、`${`と`}`の外側に記述してください。
Q3: 文字列と数値を結合することはできますか？
A3: はい、可能です。JavaScriptでは、文字列と数値を加算演算子(+)で結合すると、数値が文字列に変換されて結合されます。
その他の参考記事:JavaScript String 文字列オブジェクト