JavaScriptで変数に文字列を代入するにはどうすればいいですか？

JavaScriptで変数に文字列を代入する方法

JavaScriptで文字列を扱う場合、変数に文字列を代入する方法を理解することは基本であり、様々な場面で必要となります。ここでは、JavaScriptで変数に文字列を代入する方法について、具体例を交えながら解説していきます。

1. 文字列の基本

JavaScriptで文字列を扱う場合、シングルクォーテーション(')またはダブルクォーテーション(")で囲む必要があります。


let message1 = 'こんにちは';
let message2 = "世界";

上記のように、`message1`には「こんにちは」、`message2`には「世界」という文字列がそれぞれ代入されています。どちらのクォーテーション記号を使用しても問題ありませんが、統一することが推奨されます。

ES6から導入されたテンプレートリテラルを使うと、より柔軟に文字列を扱うことができます。特に、変数を文字列に埋め込む際に便利です。テンプレートリテラルはバッククォート(`)で囲みます。

テンプレートリテラル内では、`${変数名}`の形式で変数を埋め込むことができます。


let name = "太郎";
let greeting = `こんにちは、${name}さん！`;
console.log(greeting); // 出力結果: こんにちは、太郎さん！

上記のように、変数`name`の値が`${name}`の部分に埋め込まれ、「こんにちは、太郎さん！」という文字列が生成されます。

テンプレートリテラル内には、変数だけでなく、式を埋め込むことも可能です。


let price = 1000;
let tax = 0.1;
let message = `合計金額は${price * (1 + tax)}円です。`;
console.log(message); // 出力結果: 合計金額は1100円です。

上記では`${price * (1 + tax)}`という式が評価され、その結果が文字列に埋め込まれています。

従来の文字列では、複数行に渡る文字列を扱う場合、改行コード(\n)を使用する必要がありました。しかし、テンプレートリテラルでは、バッククォートで囲まれた範囲内であれば、そのまま改行して記述することができます。


let message = `本日は、
晴天なり。`;
console.log(message); 

// 出力結果:
// 本日は、
// 晴天なり。

複数の文字列を結合したい場合は、加算演算子(+)を使用します。


let firstName = "太郎";
let lastName = "山田";
let fullName = lastName + " " + firstName;
console.log(fullName); // 出力結果: 山田 太郎

JavaScriptで変数に文字列を代入する方法には、シングルクォート、ダブルクォートで囲む方法と、ES6から導入されたテンプレートリテラルを使用する方法があります。テンプレートリテラルを使うことで、変数や式の埋め込み、複数行の文字列の記述などが容易になります。

* [MDN Web Docs: テンプレートリテラル](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals)

A1: どちらを使っても問題ありませんが、プロジェクト全体で統一することが推奨されます。

A2: `${`と`}`で囲まれている部分以外は、そのまま文字列として扱われます。変数名以外を表示したい場合は、`${`と`}`の外側に記述してください。

A3: はい、可能です。JavaScriptでは、文字列と数値を加算演算子(+)で結合すると、数値が文字列に変換されて結合されます。