TypeScript中三种字符串赋值方式的差异探究

嘿，这个问题问得超实用！很多刚接触TypeScript（或者说JavaScript）的同学都会纠结这三种字符串写法到底有啥不一样，我来给你把区别说透～

1. 单引号(')和双引号(")：本质是「换汤不换药」 #

这俩在功能上完全等价，都是用来定义普通字符串的。选单引号还是双引号纯粹是个人或者团队的编码风格偏好——比如有些团队要求统一用单引号，有些习惯双引号，TypeScript编译器对这两种写法一视同仁，完全不会有运行时的差异。

唯一需要注意的小细节是：如果字符串本身包含单引号，用双引号包裹就不用转义，反之亦然。举个例子：

let str1 = 'I said "Hello!"'; // 双引号在单引号里不用转义，写起来更清爽
let str2 = "I'm fine."; // 单引号在双引号里同理

要是非得用同一种引号包裹，就得加转义符\，比如let str3 = 'I\'m fine.';，就稍微麻烦一点。

2. 反引号(`)：有专属技能的「升级版字符串」 #

反引号是ES6引入的模板字符串语法，TypeScript完全支持，它和单双引号有实打实的功能差异，可不是单纯的风格问题：

• 直接写多行字符串：不用再费劲用+拼接或者加\n换行，直接敲回车换行就行，排版超舒服：

  let multiLineStr = `这是第一行内容
  这是第二行，直接换行就行
  这是第三行，完全不用额外处理`;
  

• 直接嵌入变量/表达式：用${变量/表达式}的形式，就能把动态内容直接插到字符串里，再也不用像以前那样'我的名字是' + name + '，今年' + age + '岁'这么麻烦了：

  let userName = "Bob";
  let userAge = 30;
  let userInfo = `我的名字是${userName}，明年我就${userAge + 1}岁啦`;
  // 输出结果：我的名字是Bob，明年我就31岁啦
  

• 支持标签模板（高级玩法）：还能在反引号前面加一个自定义函数，用来处理模板字符串的内容，比如做HTML转义、国际化翻译之类的操作：

  // 举个简单的标签函数例子
  function formatStr(strings: TemplateStringsArray, ...values: any[]) {
    return strings.reduce((total, str, index) => {
      return total + str + (values[index] ? values[index].toUpperCase() : '');
    }, '');
  }
  let result = formatStr`Hello ${userName}, nice to meet you!`;
  // 输出：Hello BOB, nice to meet you!
  

最后总结一下 #

• 要是只是定义普通的单行字符串，单引号和双引号随便选，跟着自己或团队的风格走就行；
• 要是需要写多行内容、嵌入动态值，或者用到标签模板这种高级功能，那必须得用反引号的模板字符串。

内容的提问来源于stack exchange，提问作者Socrates