JavaScript で文字列を扱うとき、いまだにシングルクォートとダブルクォートのどちらを使うか迷ってしまいます。
そうこうしているうちに 2019 年を迎えてしまいましたが、そろそろ一つ選ぼうと思いざっくり調べたので、ついでにまとめてみました。
TL;DR
- シングルクォートとダブルクォートには本質的な違いはない。
- それぞれの利点の比較では、どちらかを選ぶ決め手がない。
- シングルクォートとダブルクォートに加えて、テンプレートリテラルという選択肢もある。
- 一つのクォートに絞らず、文字列の内容によって使い分ける方法もある。
- 個人的には、テンプレートリテラルを頑張って使っていこうと思った。
本質的には同じもの
シングルクォートとダブルクォートの仕様としての共通点を以下にあげています。
キーボードの種類によって多少の苦労は変わりつつも、シングルクォートとダブルクォートには本質的な違いはないようです。
- 文字列を表す。
- システムの解釈において違いはない。
- 開始したクォートと同じクォートでとじる必要がある。
- クォート内で同じクォートを利用するときは、エスケープする必要がある
'シングルクォート内のシングルクォート(\')はエスケープする'"ダブルクォート内のダブルクォート(\")はエスケープする"
- 一方のクォート内で、もう一方のクォートをエスケープする必要はない。
'シングルクォート内のダブルクォート(")はエスケープしない'"シングルクォート内のシングルクォート(')はエスケープしない"
- ドイツ、ハンガリー、オーストリアなどのキーボードでは、シングルクォートとダブルクォートの両方で
Shiftキーを必要。 - トルコ Q キーボードでは、シングルクォートの入力に
Shiftキーが必要・
違いはあれど、決め手とはならず
シングルクォートとダブルクォートの違いやそれぞれの利点として Web 上の議論でよく見かけたものをあげてみました。
それぞれの利点の比較としては、論点の粒度が非常に細かく、どちらかを選ぶ決め手としては不十分な印象を受けました。
シングルクォート
- HTML を文字列で記述するときに、ダブルクォートをエスケープする必要がない。
"<div id=\"foo\"></div>"'<div id="foo"></div>'
- 空文字を表現するときに、ダブルクォートでは煩雑な印象となるが、シングルクォートはでシンプルで可読性が高い。 例:
"" vs '' - シングルクォートは
Shiftキーを押す必要がない（一部のキーボードを除く）。 - メジャーな JavaScript ライブラリでもシングルクォートが採用されている。
ダブルクォート
- ダブルクォートが採用されている JSON ファイルと統一の取れたコーディング規約を適用できる。
- 多くの言語が文字列をダブルクォートで表現しているため、JavaScript への参入障壁が低い。
- 英語の文章を書くときに、アポストロフィー(')をエスケープする必要がない。
テンプレートリテラル(バッククォート)というもう一つの選択肢
ES6 で登場したテンプレートリテラルですが、粛々とパフォーマンス改善やブラウザ対応がすすめられ、今では実用レベルにまで達しています。
また、バッククォート(`)で囲うため、シングルクォートやダブルクォートのエスケープの必要がなくなり、可読性向上においても大きく貢献します。
あえて短所をあげるとすれば、まだまだ新しい技術のためノウハウが溜まっていない事でしょうか。
１つに絞らないルールをつくる
どのクォートも一長一短であり、プロジェクト内での統一は必要ですが、あとは好みの問題ということになります。
しかし、一つのクォートに絞ったコーディング規約を作ってしまうと、エスケープが多発したときに可読性の維持が難しくなります。
そこで以下のように、文字列の内容によって使い分けるコーディング規約もあります。
-
Google JavaScript Style Guide ではシングルクォートを推奨しているが、文字列がシングルクォートを含む場合、バッククォートの使用を推奨している。
'文字列にシングルクォート(\')が含まれる'`文字列にシングルクォート(')が含まれる`
- 過去、 Standard JS では以下のルールを適用していた(#issues421)。
- シングルクォートを使用
- 文字列がシングルクォートを含む場合、シングルクォートをエスケープするか、ダブルクォートを使用
- 文字列がダブルクォートを含む場合、ダブルクォートをエスケープするか、バッククォートを使用
まとめ
- キーボードの種類によって多少の苦労は変わりつつも、シングルクォートとダブルクォートには本質的な違いはない。
- それぞれの利点の比較ではポイントの粒度が細かく、どちらかを選ぶ決め手がない。
- シングルクォートとダブルクォートに加えて、テンプレートリテラルという選択肢もある。
- 一つのクォートに絞らず、文字列の内容によって使い分ける方法もある。
個人的には、テンプレートリテラルを頑張って使っていこうと思いました。
参考:
- https://staxmanade.com/2018/03/should-i-use-javascript-single-or-double-quotes/
- https://stackoverflow.com/questions/29055518/are-es6-template-literals-faster-than-string-concatenation
- https://www.deep-rain.com/programming/javascript/904
- https://github.com/standard/standard/issues/421
- https://stackoverflow.com/questions/37777677/is-there-a-downside-to-using-es6-template-literals-syntax-without-a-templated-ex