JavaScript字符串含单/双引号引发语法错误问题求助

阿华AIGC实验室

2026-5-15

解决JavaScript含特殊字符字符串的SyntaxError问题

我完全懂你的困扰——这个字符串里的特殊字符（包括单/双引号、反引号还有各类Unicode字符）直接作为字面量写进JS代码时，会打乱解析器对字符串边界的判断，触发Uncaught SyntaxError，而且你还不想改动字符串本身。下面给你几个不需要修改原字符串就能解决问题的方案：

方案1：用HTML元素的data属性存储字符串

这是最直接的思路，把字符串放到HTML元素的自定义data属性里，再通过JS读取，完全避开JS字面量的解析陷阱：

<!-- 用隐藏元素存储字符串，不影响页面布局 -->
<div id="string-storage" style="display: none" data-content="XfÍË`á²Û)a^ËoT%çíZ óAuGÒH¾CnäjIònh²~æuÁ8&gt;ÊMï|xWwJ¨L ´³á×ß1Q/;©îé*g®ûA4PÆÎhÂ&amp;V§Fà #+ûsÙ9 8g¬dJ fiddle example"></div>

然后在JS中读取：

const targetString = document.getElementById('string-storage').dataset.content;
// 此时targetString就是你需要的原始字符串，无解析错误
console.log(targetString);

这个方法在Chrome和IE（包括IE11）都能正常工作，全程不需要修改原字符串的任何内容。

方案2：从外部文本文件加载字符串

如果你的字符串内容较长或者需要复用，可以把它单独存成一个.txt文件，然后通过请求读取：

// 现代浏览器（如Chrome）用fetch
fetch('your-string-file.txt')
  .then(res => res.text())
  .then(str => {
    console.log(str); // 这里拿到的就是原始字符串
  })
  .catch(err => console.error('加载失败:', err));

// 兼容IE的话用XHR
const xhr = new XMLHttpRequest();
xhr.open('GET', 'your-string-file.txt', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const targetString = xhr.responseText;
    console.log(targetString);
  }
};
xhr.send();

这个方法同样不需要改动原字符串，只是把字符串的存储位置从JS代码移到了外部文件。