JavaScript 中字符串字面量的双引号和单引号是否可互换？

技术背景

在 JavaScript 里，字符串既可以用单引号 ' 也能用双引号 " 来界定。开发者常常会面临选择使用哪种引号的问题，不同的选择可能会对代码的可读性、可维护性以及性能产生影响。同时，JSON 规范明确要求字符串必须使用双引号，这也给开发者的选择增添了额外的考量因素。

实现步骤

1. 使用不同引号界定字符串

在 JavaScript 中，单引号和双引号都能用来创建字符串：

1 2	`let singleQuoted = '这是一个单引号字符串'; let doubleQuoted = "这是一个双引号字符串";`

2. 在字符串中使用另一种引号

为了避免转义字符的使用，可以在一种引号界定的字符串里使用另一种引号：

1 2	`alert('Say "Hello"'); alert("Say 'Hello'");`

3. 使用模板字面量（ES6 新增）

ES6 引入了模板字面量，使用反引号 ` 来界定字符串，它支持变量插值和多行字符串：

1 2	let name = 'John'; alert(`Hello, ${name}!`);

核心代码

不同引号的使用示例

// 单引号字符串
let singleQuoted = 'It\'s a single-quoted string.';
// 双引号字符串
let doubleQuoted = "He said: \"Let's go!\"";
// 模板字面量
let templateLiteral = `This is a template literal with ${singleQuoted} and ${doubleQuoted}`;

函数定义中的引号使用

// 扩展 String 原型的 trim 方法
String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, '');
};
// 独立的 trim 函数
function trim(str) {
    return str.replace(/^\s+|\s+$/g, '');
}

最佳实践

遵循团队或项目的风格规范

若在团队或项目中进行开发，应遵循既定的代码风格规范。例如，Douglas Crockford 建议使用双引号。

根据具体场景选择引号

HTML 生成：若要在 JavaScript 里生成 HTML 代码，使用单引号通常更为便利，因为 HTML 属性一般使用双引号：

1	`elem.innerHTML = '<a href="' + url + '">Hello</a>';`

JSON 处理：JSON 规范要求字符串使用双引号，所以在处理 JSON 时，务必使用双引号：

1	`let myJson = '{"hello world": true}';`

保持一致性

在代码中始终使用同一种引号风格，这样能增强代码的可读性和可维护性。

常见问题

1. 浏览器解析差异

在过去，不同浏览器对引号的解析存在差异。例如，Firefox 会把单引号替换为双引号，但现代版本的 Firefox 已不再有此问题。

2. 性能差异

虽然有人声称单引号和双引号在性能上存在差异，但这种差异极小，且会因浏览器的实现而改变。在实际开发中，引号通常不会成为性能瓶颈。

3. 内联 JavaScript 中的引号使用

在内联 JavaScript 里，单引号是字符串字面量的唯一选择，因为双引号会与 HTML 属性的引号冲突。

1	`<a onclick="alert('hi');">hi</a>`