如何使用 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 标记时同时使用单引号和双引号。
相关文章
使用 CSS 和 JavaScript 制作文本闪烁
发布时间：2023/04/28 浏览次数：146 分类：CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间：2023/03/29 浏览次数：69 分类：PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间：2023/03/24 浏览次数：93 分类：JavaScript
-
在本文中，我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
在 JavaScript 中获取字符串的最后一个字符
发布时间：2023/03/24 浏览次数：141 分类：JavaScript
-
本教程展示了在 javascript 中获取字符串最后一个字符的方法
