[JavaScript/ES6] シングルクォート、ダブルクォート、バッククォートの使い分け

Tadashi Shigeoka ·  Wed, July 19, 2017

JavaScript (ECMAScript 6: ES6) でシングルクォート、ダブルクォート、バッククォートの使い分けをエンジニア研修中のメンバーに質問されたので MDN の記事を参考にしつつ、ご紹介します。

JavaScript

文字列リテラル (String literals)

文字列リテラルとは、0 個以上の文字を二重引用符 (") または単一引用符 (') でくくったものです。文字列は同じ種類の引用符でくくらなければなりません。つまり、どちらも単一引用符にするか、またはどちらも二重引用符にします。

シングルクォート (Single-quote)

let singleStr = 'He said "Hello".';
console.log(singleStr);
// He said "Hello".

ダブルクォート (Double-quote)

let doubleStr = "I'm fine.";
console.log(doubleStr);
// I'm fine.

テンプレート文字列 (Template literal)

バッククォート (Backquote)

const DOMAIN_NAME = 'codenote.net';
let backquoteStr = `This site is ${DOMAIN_NAME}.`;
console.log(backquoteStr);
// This site is codenote.net.

シングルクォート ' とバッククォート ` を使う

個人的なまとめなのですが、文字列リテラルには「シングルクォート ’」、テンプレート文字列には「バッククォート `」を使う方針で開発しています。

理由としては、Should I use ‘single’ or “double-quotes” for strings in JavaScript の記事によると、JavaScript の有名な OSS がシングルクォート ’ を多く採用しているとのことだったからです。