如何使用 JavaScript 转义字符串中的引号
在 JavaScript 中转义字符串中的引号
要转义字符串中的单引号或双引号，需要在字符串内容中的每个单引号或双引号之前使用反斜杠 \ 字符，例如 'that's it'。
const escapeSingle = 'it\'s a string';
console.log(escapeSingle) // 👉️ it's a string
const escapeDouble = "fql\"jiyik"
console.log(escapeDouble) // 👉️ fql"jiyik
当我们使用反斜杠字符转义单引号或双引号时，我们指示 JavaScript 我们希望将引号视为文字单引号或双引号字符，而不是字符串结尾字符。 如果在用单引号引起来的字符串中使用单引号，则会过早地终止该字符串。
但是，当我们使用反斜杠转义单引号时，情况就不是这样了。
转义字符串中的双引号
我们可以使用相同的方法来转义字符串中的双引号。
const escapeDouble = "He said: \"test 123\""
console.log(escapeDouble) // 👉️ He said: "test 123"
我们使用反斜杠 \ 字符来转义字符串中的每个双引号。
使用 String.replaceAll() 转义字符串中的引号
我们还可以使用 String.replaceAll() 方法转义字符串中的引号。
// ✅ 转义每一个单引号
const str = "it's a string";
console.log(str); // 👉️ it's a string
const result = str.replaceAll("'", "\\'");
console.log(result); // 👉️ it\'s a string
String.replaceAll() 方法返回一个新字符串，其中所有匹配的模式都被提供的替换项替换。
该方法采用以下参数：
- pattern 要在字符串中查找的模式。 可以是字符串或正则表达式。
- replacement 一个字符串，用于将匹配的子字符串替换为提供的模式。
代码示例对字符串中的每个单引号进行转义。
// ✅ 转义每一个单引号
const str = "it's a string";
console.log(str); // 👉️ it's a string
const result = str.replaceAll("'", "\\'");
console.log(result); // 👉️ it\'s a string
可以使用相同的方法来转义字符串中的双引号。
// ✅ 转义每一个双引号
const str = 'it"s a string';
console.log(str); // 👉️ it"s a string
const result = str.replaceAll('"', '\\"');
console.log(result); // 👉️ it\"s a string
String.replaceAll() 方法返回一个新字符串，其中替换了模式的匹配项。 该方法不会更改原始字符串。
字符串在 JavaScript 中是不可变的。
交替引号以避免使用反斜杠
可以通过更改字符串的外部引号来避免转义引号。
const withSingle = "it's a string";
console.log(withSingle) // 👉️ it's a string
const withDouble = 'He said: "test 123"'
console.log(withDouble) // 👉️ He said: "test 123"
我们交替使用双引号和单引号，因此我们不必转义它们。
使用反引号代替反斜杠
请注意，我们还可以在定义存储字符串的变量时使用反引号。 这允许我们在字符串中同时使用单引号和双引号而无需转义它们。
const withBoth = `it's a "test 123"`;
console.log(withBoth) // 👉️ it's a "test 123"
该字符串用反引号括起来，因此我们不必在其内容中转义单引号和双引号。
要将反斜杠 \ 字符添加到字符串，请将两个反斜杠并排添加。
第一个反斜杠转义第二个反斜杠，因此第二个反斜杠按字面意思。
const addBackslash = "He said: \\\"test 123\\\""
console.log(addBackslash) // 👉️ He said: \"test 123\"
我们有 3 个相邻的反斜杠。 第一个反斜杠转义第二个反斜杠，因此它由 JavaScript 按字面解释。 第三个反斜杠用于转义双引号。
这是一个更现实的例子，我们只在字符串中添加一个反斜杠。
const addBackslash = "BMW \\1996\\"
console.log(addBackslash) // 👉️ BMW \1996\
显示字符串中的转义字符
如果需要在字符串中显示转义字符，请使用 JSON.stringify() 方法。
const addBackslash = 'BMW \\1996\\';
console.log(addBackslash); // 👉️ BMW \1996\
const withEscapeChars = JSON.stringify(addBackslash);
console.log(withEscapeChars); // 👉️ "BMW \\1996\\"
JSON.stringify 方法将 JavaScript 值转换为 JSON 字符串。
将值转换为 JSON 字符串时，其输出包含转义字符。
避免在 HTML 代码中使用内联事件处理程序
如果在 HTML 代码中使用内联事件处理程序时出现错误，最好的解决方案是重写代码以使用 JavaScript 而不是使用内联事件处理程序。
这是一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="box">jiyik.com</div>
<script type="module" src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
const box = document.getElementById('box');
function handleClick() {
box.style.background = 'lime';
}
box.addEventListener('click', handleClick);
box.innerHTML = `
<div id="box">
<p title="example">jiyik.com</p>
<p>Hello world</p>
</div>
`;
我们可以使用 document.getElementById() 方法或 querySelector 方法选择 DOM 元素。
然后，我们可以向元素添加事件侦听器或更新其内部 HTML 标记。
请注意，我们在设置 innerHTML 属性时使用了反引号。
这使我们能够在构建 HTML 标记时同时使用单引号和双引号。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间：2024/03/23 浏览次数：86 分类：JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组，以及如何删除任何重复的数组。
