初心者コーダーのための
HTML/CSS JavaScript PHP WordPress
難しい言葉や概念より、実践重視の入門ブログ
JavaScript

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

【JavaScript】'と"と` クォーテーションの使い分け

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

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

  • ‘シングルクォーテーション’(Shift + 7)
  • “ダブルクォーテーション”(Shift + 2)
  • `バッククォート`(Shift + @)

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

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を使わずとも改行が反映される
  • 文字として’や”を問題なく使える
  • 文字列と変数の連結方法が異なる

バッククォートの中では、シングル・ダブルクオーテーションも難なく使え、\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>