怎样使用 JavaScript 转义字符串中的引号
在 JavaScript 中转义字符串中的引号
要转义字符串中的单引号或双引号，需要在字符串内容中的每个单引号或双引号之前使用反斜杠 \ 字符，例如 ‘that’s it’。
const escapeSingle = 'it\'s a string'; console.log(escapeSingle) // 👉️ it's a string const escapeDouble = "fql\"zadmei" console.log(escapeDouble) // 👉️ fql"zadmei
当我们使用反斜杠字符转义单引号或双引号时，我们指示 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 stringString.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 stringString.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">zadmei.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">zadmei.com</p>
<p>Hello world</p>
</div>
`;我们可以使用 document.getElementById() 方法或 querySelector 方法选择 DOM 元素。
然后，我们可以向元素添加事件侦听器或更新其内部 HTML 标记。
请注意，我们在设置 innerHTML 属性时使用了反引号。
这使我们能够在构建 HTML 标记时同时使用单引号和双引号。
到此这篇关于如何使用 JavaScript 转义字符串中的引号的文章就介绍到这了,更多相关js转义字符串内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JS数组去掉重复数据只保留一条的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
JavaScript中的函数本质上是一个对象，我们可以将这个对象赋值给一个变量，这就使JavaScript中的函数变得非常的灵活，现在就来浅看一下JavaScript中函数的一些用法,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了js获取客户端网卡的IP地址、MAC地址的方法,需要的朋友可以参考下2014-03-03
这篇文章主要介绍了基于JavaScript实现仿京东图片轮播效果，代码简单易懂，需要的小伙伴参考下吧2015-11-11
瀑布流布局很受广大网民的青睐，本篇文章给大家介绍原生JS实现美图瀑布流布局，非常漂亮，需要的朋友可以参考下2015-09-09
在本篇文章中，小编给大家分享了关于js隐式转换的相关知识点内容，有兴趣的朋友们参考学习下。2018-09-09
这篇文章主要介绍了js代码规范之Eslint安装与配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
iframe里的值在实现一些比较特殊功能时需要获取的，下面为大家详细介绍下使用javascript获取iframe里值的方法，感兴趣的各位可以参考下哈2013-06-06
这篇文章主要介绍了微信小程序实现滑动操作代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
在向服务器发送数据时一般是字符串,我们可以使用 JSON.stringify()方法将JavaScript对象转换为字符串,下面这篇文章主要给大家介绍了关于JSON.stringify及灵活运用的相关资料,需要的朋友可以参考下2022-03-03
最新评论