【Javascript】「’」と「`」の違いについて

運営者:そうすけ

愛媛のエンジニア兼ブロガー。
工場勤務→社内SE→自社開発にキャリアチェンジ。
主にバックエンド開発を行っています。

【ブログ運営歴】2021.6~
【プログラミング歴】2022.3~

本業:Java,MySQL、個人:Typescript

JavaScriptでは、文字列を表現する際にシングルクォート「’」とバッククォート「`」の2つの記号が利用されます。

学習初期の時、これの間違いでかなり詰まりました。

これが他人のコード見る時、めっちゃ見にくい!!

この記事では、「’」(シングルクォート)と「」(バッククォート)の違いに焦点を当て、それぞれの特徴や使いどころについて解説します。

目次

シングルクォート(’)の特徴

シングルクォートは、Javascriptの文字列を定義するための一般的な方法です。

文字列を表現するときに一般的にシングルクォートを使用します。

これを付けると自動で文字型と判定します。

let singleQuotedString = 'シングルクォートで囲まれた文字列';

シングルクォート内でシングルクォートを表現する場合、エスケープが必要です。

let escapedSingleQuote = 'シングルクォートを含む文字列: I\'m happy!';

バッククォート(`)の特徴

バッククォートは、ES6(ECMAScript 2015)から導入されたテンプレートリテラルと呼ばれる新しい文字列の表現方法です。

バッククォートの特徴をまとめます。

文字列の定義

文字列を書くときに使用します。シングルクォートと同じ使い方です。

let backQuotedString = `バッククォートで囲まれた文字列`;

変数の埋め込み

変数を文字列内に埋め込むときに使用します。このためにバッククォートを使うといってもいいです。 

let name = 'John';
let greeting = `こんにちは、${name}さん!`;

改行コードを埋め込み

複数行の文字列を表現するのに便利です。

let multiLineString = `
  これは
  複数行の
  文字列です。
`;

シングルクォートいらんくない?という疑問

バッククォートはシングルクォートを包含する上位互換であり、変数の埋め込みや複数行の文字列表現など、多くの点で優れています。

近年のJavaScript開発では、できる限りバッククォートを利用することが一般的となっているそうです。

まとめ:バッククォートを使おう

シングルクォートとバッククォートは文字列を表現するための記号であり、それぞれの特徴が存在します。

ここは変数を使っているよ!というアピールになりますが、正直小さすぎて可読性に難があると個人的に思います。

バッククォートはこれらの利点から、シングルクォートよりも柔軟で効率的な文字列表現手段となっています。

コードの可読性やメンテナンス性を向上させるために、できる限りバッククォートを使用することが推奨されます。

新しいプロジェクトや既存のコードベースでのバッククォートの積極的な利用を検討してみましょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次