JavaScript における二重引用符、一重引用符、バッククォーテーションの違い

最新のオリジナル記事を入手するには、WeChat パブリックアカウント: Front-end Power Bankをフォローしてください。

JavaScript では、文字列の作成に一重引用符 ('') と二重引用符 ("") がよく使用されます。通常、二重引用符を使用するか一重引用符を使用するかに違いはなく、両方とも文字列を表すことになります。それらの唯一の違いは、文字をエスケープするためにバックスラッシュ文字 () を使用する必要がある場合です。

一重引用符を使用して文字列を作成する場合、文字列内で一重引用符を使用することはできません。エスケープするにはバックスラッシュ () のみを使用できます。例えば：

const hi = 'hello' world';
console.log(hi)

バックスラッシュを使用してのみエスケープできます。

const hi = 'hello\' world';
console.log(hi)  // 输出结果：hello' world

二重引用符内で二重引用符を使用する場合は、バックスラッシュでエスケープする必要もあります。

const hi = "hello\" world";
console.log(hi)  // 输出结果：hello" world

二重引用符内で一重引用符を使用したい場合は、それを直接使用できます。

const hi = "hello' world";
console.log(hi)  // 输出结果：hello' world

また、JSON ファイルでは一重引用符がサポートされていないため、JSON ファイルと JavaScript ファイル間でコピーアンドペーストする場合は特に注意が必要です。

一重引用符と二重引用符が一般的に使用されますが、ES6 にはテンプレート文字列 (バックティック) という 3 番目の解決策があります。

(1) 文字列接続

const name = 'javascript';
console.log(`hello ${
      
      name}`);  // 输出结果：hello javascript

(2) 一重引用符または二重引用符をエスケープする必要はありません

console.log(`hello "JS"`);   // 输出结果：hello "JS"
console.log(`hello 'CSS'`);  // 输出结果：hello 'CSS'

(3) 改行を使用せずに複数行のコンテンツを記述します。

console.log(`hello

JS`);
// 输出结果：
hello 

JS

では、一重引用符、二重引用符、またはバッククォートを使用すると、パフォーマンスに違いはあるのでしょうか? 3 つの方法による 3 つの形式間のパフォーマンスの違いを簡単に見てみましょう。

function testingDoubleQuotes(){
    
    
  console.time('单引号');
  for (let i = 0; i < 100000; i++) {
    
    
   const string1 = "String One";
  }
  console.timeEnd('单引号');
}

function testingSingleQuotes(){
    
    
  console.time('双引号');
  for (let i = 0; i < 100000; i++) {
    
    
   const string2 = 'String Two';
  }
  console.timeEnd('双引号');
}

function testingbackticks(){
    
    
  console.time('反引号');
  for (let i = 0; i < 100000; i++) {
    
    
   const string1 = `String Three`;
  }
  console.timeEnd('反引号');
}

testingDoubleQuotes();
testingSingleQuotes();
testingbackticks();

結果は次のとおりです。

上記の結果に基づいて、バッククォートが最も速く、二重引用符が最も遅いことがわかります。もちろん、この結果は毎回同じではなく、参考値です。ただし、そのような微妙な違いはプロジェクトには影響しません。

要約すると、一重引用符、二重引用符、またはバックティックの使用には大きな違いはありません。好みに応じて 1 つまたは複数のスタイルを選択できます。ただし、クリーンで一貫性を保つために、プロジェクト全体で単一の形式を使用することが最善です。

それ以外の場合は、コードフォーマッタを使用するか、スタイルガイドに従うことができます。これらにはすべてデフォルトのタイプがあります。

Prettier はデフォルトで二重引用符を使用します。
Eslint はデフォルトで二重引用符を使用します。
Airbnb スタイルガイドでは一重引用符の使用を推奨しています。

より一般的な JavaScript オープンソースプロジェクトのソースコードでは、二重引用符よりも一重引用符の方が一般的です。

オープンソースプロジェクト	一重引用符の使用割合
ロダッシュ	99%
反応する	90%
リクエスト	97%
一瞬	90%
急行	92%
デバッグ	97%
アクシオス	81%

JavaScript における二重引用符、一重引用符、バッククォーテーションの違い

おすすめ