【JavaScript】クォーテーションの使い分けと文字列・変数の連結方法【’と”と`】

JavaScriptで文字列を扱うとき、文字列をクォーテーションと呼ばれる記号で囲む必要があります。

使えるクォーテーションの種類は3種類。

実際に使うとこのようになります。

console.log('Hello!');
console.log("Hello!");
console.log(`Hello!`);

console.log();が分からない方はこちら

シングルとダブルに大きな違いはありませんが、バッククォートには特徴的な使い方があります。

えふぃ

なくて困るものではありませんが、知っているととても便利です！！

サンプルコードの使い方

コード右上のアイコンをクリックすることでコピーできます。
見出しが「サンプルコード」のコードは、空っぽのhtmlファイルにコピペするだけで結果を確認することができます！

それでは本文へ、レッツゴー！

シングルとダブルに違いはない

‘シングル’か“ダブル”かについては、違いはほぼありません。

比較的Javascriptではシングルクォーテーションの方がよく見かけます。
特にこだわりがなければシングルクォーテーションを使っておけば間違いないですね！

ただし「I’m fine」など、シングルクォーテーションをを通常の文字として使いたい場合、シングルクォーテーションで囲むとエラーが出てしまいます。

サンプルコード

console.log('I'm fine!');

通常の文字として’を使う方法

シングルクォーテーションを通常の文字として使いたい場合、2種類の方法で使うことができます。

① シングルクォーテーション以外で囲む

シングルクォーテーションで囲んでいる部分を、ダブルクォーテーションもしくはバッククォートに変更します。

② 文字として使いたい’の前に バックスラッシュを置く

\（バックスラッシュ）は、直後に来る文字を強制的に文字として認識させる能力があります。

シングルクォーテーションの前にバックスラッシュを置くことで「\の直後に来る’は文字ですよ」と教えてあげることができます

えふぃ

\は「option + ¥」で打てます！（Mac）

余談ですが、\n と記述することで、console内で改行をすることができます。

サンプルコード

①と②、特にどちらがどうというわけではないので、好みで使って問題ありません。

<script>
    /* 文字として'を使いたい場合 */
    // 囲んでいる''（シングル）を"""（ダブル）に変更する
    console.log("I'm fine!");
    // 文字として使いたい'の前に\（option + ¥）を置く
    console.log('I\'m fine!');

    /* \nで改行 */
    console.log('こんにちは！\n今日はとってもいい天気だね！');
</script>

<script></script>が分からない方はこちら

文字列と変数を連結させる方法

変数と文字列を連結させて、1つの文章にしたい場合「+」を使って連結することができます。

サンプルコード

<script>
    const name = 'World'
    console.log('こんにちは、' + name + 'さん！');
</script>

constが分からない方はこちら

ここで満を持してバッククォートの登場

バッククォートは、シングル・ダブルクオーテーションと仕様が少し変わります。

普通にシングルクオーテーションでも事足りる程度のことなので、無理に使う必要もないのですが、覚えておくとかなり便利です。

バッククォートの中では、シングル・ダブルクオーテーションも難なく使え、\nを使わずとも改行がconsoleに反映されます。

クオーテーションは割と文字として使いたいことがあるので、地味に助かったりします。

そして何よりバッククォートの真価は、文字列と変数の連結方法です。

バッククォート内での文字列と変数の連結方法

文字列と変数を「+」で繋ぐ必要がなくなり、1つのバッククオート内で変数を「${変数名}」として用いることができるようになります。

サンプルコード

<script>
    const name2 = 'World2'
    console.log(`こんにちは！${name2}さん！`);
</script>

+で繋ぐ必要がなくなりました！すごい！

サンプルコードまとめ

最後に今回のサンプルコードを全てまとめて終わりにします。

基本的にシングルクォーテーションを目にすることが多いですが、バッククォートも非常に便利なので、ぜひお試しください！

<script>
    // シングルクォーテーション（Shift + 7）
    console.log('Hello!');
    // ダブルクォーテーション（Shift + 2）
    console.log("Hello!");
    // バッククォート（Shift + @）
    console.log(`Hello!`);

    // 'を文字として扱いたい場合
    console.log('I\'m fine!');
    console.log("I'm fine!");
    console.log(`I'm fine!`);

    // 文字列と変数を連結させたい場合
    const name = 'World'
    console.log('こんにちは！\n'+ name + 'さん！\n今日はいい天気だね！');
    console.log(`こんにちは！
    ${name}さん！
    今日はいい天気だね！`);
</script>