JavaScript初心者でもわかる！文字列リテラルの使い分け

2024-04-05

JavaScriptにおける二重引用符と単一引用符の使い分け

文字列リテラル

二重引用符: 変数や式を埋め込むことができます。

例:

const name = "John";
const message = `Hello, ${name}!`; // 二重引用符で変数 ${name} を埋め込む
const greeting = 'Hello, John!'; // 単一引用符では変数を埋め込めない

エスケープシーケンス

二重引用符: 特殊文字を表すエスケープシーケンスを使用できます。

const quote = "He said, \"Hello, world!\"" // 二重引用符でエスケープシーケンス \" を使用
const error = 'He said, "Hello, world!"'; // 単一引用符ではエスケープシーケンスが使えないためエラーになる

コードの読みやすさ

二重引用符: 変数や式を含む場合は二重引用符の方が読みやすい場合があります。

const message = `Hello, ${name}! You have ${unreadEmails} unread emails.`; // 二重引用符で変数と式を埋め込む
const greeting = 'Hello, John!'; // 単一引用符でシンプルな文字列を記述

変数や式を埋め込む場合は二重引用符を使用する。
エスケープシーケンスを使用する場合は二重引用符を使用する。
コードの読みやすさを考慮して二重引用符と単一引用符を使い分ける。

// 変数と式を含む文字列

const name = "John";
const age = 30;

const message = `Hello, ${name}! You are ${age} years old.`;
console.log(message); // 出力: "Hello, John! You are 30 years old."

// エスケープシーケンスを含む文字列

const quote = "He said, \"Hello, world!\""
console.log(quote); // 出力: "He said, "Hello, world!"

// コードの読みやすさ

const greeting = 'Hello, ' + name + '! Welcome to the website.';
const greeting2 = `Hello, ${name}! Welcome to the website.`;

console.log(greeting); // 出力: "Hello, John! Welcome to the website."
console.log(greeting2); // 出力: "Hello, John! Welcome to the website."

このコードを実行すると、以下の出力が得られます。

Hello, John! You are 30 years old.
He said, "Hello, world!"
Hello, John! Welcome to the website.
Hello, John! Welcome to the website.

このコード例は、二重引用符と単一引用符の使い分けを理解するのに役立ちます。

HTML属性値: 属性値に二重引用符を使用すると、属性値内に変数や式を埋め込むことができます。
JSON: JSONデータでは、文字列リテラルを囲むために二重引用符を使用する必要があります。

二重引用符と単一引用符の代わりに使える方法

テンプレートリテラルは、バッククォート (`) で囲まれた文字列リテラルです。テンプレートリテラルを使用すると、変数や式を埋め込むことができ、エスケープシーケンスも使用できます。

const name = "John";
const age = 30;

const message = `Hello, ${name}! You are ${age} years old.`;
console.log(message); // 出力: "Hello, John! You are 30 years old."

Tagged Template Literalsは、テンプレートリテラルの前に関数呼び出しを追加することで、テンプレートリテラルをさらに拡張する機能です。

function format(strings, ...values) {
  // strings: テンプレートリテラルの文字列部分
  // values: テンプレートリテラルに埋め込まれた式の値

  return strings.reduce((acc, str, i) => {
    return acc + str + (values[i] || "");
  }, "");
}

const name = "John";
const age = 30;

const message = format`Hello, ${name}! You are ${age} years old.`;
console.log(message); // 出力: "Hello, John! You are 30 years old."

String.prototype.replace() メソッドを使用して、文字列内の特定の部分を置換することができます。

const name = "John";
const age = 30;

const message = "Hello, $name! You are $age years old.";
const replacedMessage = message.replace(/\$name/g, name).replace(/\$age/g, age);

console.log(replacedMessage); // 出力: "Hello, John! You are 30 years old."

これらの方法は、二重引用符と単一引用符の代わりに使用することができます。どの方法を使用するかは、状況と好みによって異なります。

javascript string