原始字符串访问

ECMAScript 6 原始字符串访问

ECMAScript 6 引入了模板字符串，其中原始字符串访问是一个容易被忽略但非常实用的特性。它允许开发者获取模板字符串的原始内容，忽略转义字符的处理，直接输出字符串的原始形式。

原始字符串的基本概念

在 JavaScript 中，字符串中的反斜杠（\）通常用作转义字符。例如，\n 表示换行符，\t 表示制表符。但在某些场景下，我们可能需要获取字符串的原始形式，包括这些转义字符本身。

ES6 提供了 String.raw 标签函数来访问模板字符串的原始内容：

const path = String.raw`C:\Development\profile\about.html`;
console.log(path); // 输出: C:\Development\profile\about.html

如果不使用 String.raw，反斜杠会被解释为转义字符：

const path = `C:\Development\profile\about.html`;
console.log(path); // 输出: C:Developmentprofileabout.html

String.raw 的工作原理

String.raw 是一个标签函数，它的第一个参数是一个包含 raw 属性的对象，这个属性是一个数组，保存了模板字符串分割后的原始部分：

const tag = (strings, ...values) => {
  console.log(strings.raw[0]); // 输出原始字符串部分
  console.log(strings[0]);      // 输出处理后的字符串部分
};

tag`Hello\nWorld`;
// strings.raw[0] 输出: "Hello\\nWorld"
// strings[0] 输出: "Hello\nWorld"

实际应用场景

正则表达式中的转义字符

在编写正则表达式时，经常需要使用大量反斜杠。使用原始字符串可以避免双重转义：

const regex = String.raw`\d+\.\d+`;
console.log(regex); // 输出: \d+\.\d+
// 等价于
const regex2 = new RegExp("\\d+\\.\\d+");

Windows 文件路径处理

处理 Windows 文件路径时，原始字符串特别有用：

const filePath = String.raw`C:\Users\Public\Documents\report.docx`;
console.log(filePath); // 正确输出路径

多行字符串保持原样

当需要保持多行字符串的原始格式时：

const poem = String.raw`
  床前明月光，
  疑是地上霜。
  举头望明月，
  低头思故乡。
`;
console.log(poem);
// 保持原样输出，包括换行和缩进

自定义原始字符串处理器

我们可以创建自己的标签函数来模拟 String.raw 的功能：

function myRaw(strings, ...values) {
  let result = '';
  for (let i = 0; i < strings.length; i++) {
    result += strings.raw[i];
    if (i < values.length) {
      result += values[i];
    }
  }
  return result;
}

const str = myRaw`Hello\u{41}\nWorld`;
console.log(str); // 输出: Hello\u{41}\nWorld

与普通字符串的比较

下表展示了原始字符串与普通字符串处理的区别：

// 比较示例
const normalStr = `Hello\nWorld`;
const rawStr = String.raw`Hello\nWorld`;

console.log(normalStr);  // 输出两行
console.log(rawStr);     // 输出 "Hello\nWorld"

性能考虑

使用 String.raw 会有轻微的性能开销，因为需要创建额外的对象来存储原始字符串信息。但在大多数情况下，这种开销可以忽略不计。只有在极端性能敏感的场景中才需要考虑这一点。

浏览器兼容性

所有现代浏览器都支持 String.raw，包括：

• Chrome 41+
• Firefox 34+
• Edge 12+
• Safari 9+
• Opera 28+

对于旧版浏览器，可以使用 Babel 等工具进行转译，或者使用 polyfill：

if (!String.raw) {
  String.raw = function(strings, ...values) {
    // polyfill 实现
  };
}

与其他语言特性的结合

原始字符串可以与其他 ES6+ 特性完美结合：

// 与解构赋值结合
const [first, second] = String.raw`one\ntwo`.split('\\n');
console.log(first, second); // 输出: one two

// 与箭头函数结合
const logRaw = str => console.log(String.raw(str));
logRaw`test\nexample`; // 输出: test\nexample

常见误区

1. 误认为 String.raw 是一个方法：

   // 错误用法
   String.raw("test"); // TypeError
   
   // 正确用法
   String.raw`test`;
   

2. 忘记原始字符串仍然会处理模板变量：

   const name = "Alice";
   console.log(String.raw`Hello ${name}\n`); 
   // 输出: Hello Alice\n
   

3. 混淆原始字符串和 JSON 字符串：

   // 这不是JSON
   const notJson = String.raw`{"key": "value"}`;
   // 需要额外处理才能转为对象