JavaScriptで文字列を扱うとき、文字列をクォーテーションと呼ばれる記号で囲む必要があります。
使えるクォーテーションの種類は3種類。
- ‘シングルクォーテーション’(Shift + 7)
- “ダブルクォーテーション”(Shift + 2)
- `バッククォート`(Shift + @)
実際に使うとこのようになります。
console.log('Hello!');
console.log("Hello!");
console.log(`Hello!`);
シングルとダブルに大きな違いはありませんが、バッククォートには特徴的な使い方があります。
なくて困るものではありませんが、知っているととても便利です!!
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
見出しが「サンプルコード」のコードは、空っぽの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>
文字列と変数を連結させる方法
変数と文字列を連結させて、1つの文章にしたい場合「+」を使って連結することができます。
サンプルコード
<script>
const name = 'World'
console.log('こんにちは、' + name + 'さん!');
</script>
ここで満を持してバッククォートの登場
バッククォートは、シングル・ダブルクオーテーションと仕様が少し変わります。
普通にシングルクオーテーションでも事足りる程度のことなので、無理に使う必要もないのですが、覚えておくとかなり便利です。
- \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>