字符串(String)

2018-03-04大约12分钟

包含零个、一个或多个字符的文本称为字符串。

字符串是非常重要的数据类型之一了,比如我们的姓名、地址等都是字符串类型来表示的。编程中很多复杂的问题,都是和字符串相关的,比如字符查找、匹配等等。

字符串的表示

在代码编辑区里,输入的都是符号,JavaScript解释器是怎么知道哪些符号是字符串呢?

秘密就是:把文本放到引号中,JavaScript就会理解为文本,而不是代码。

键盘上的三种引号都可以用来表示字符串:

  • 单引号:'
  • 双引号:"
  • 键盘左上角的反引号:```,通常这个引号用作模板字符串,有特殊含义

比如:

console.log("Hello World");
console.log('Hello World');
console.log(`Hello World`);

上面例子中反引号的表示的字符串颜色不一样,可见是和上面两种是有区别的。

切记,这些引号都是英文字符的符号,千万不能用中文输入法里面的中文引号!

模板字符串

前面提到反引号时有模板字符串的含义,这里也简单介绍一下。

在编程的时候,有时候需要把多个字符串合并为一个字符串,那么一般的写法是这样的:

我们在下面的例子里要构造一个HTML的节点

const name = "小明";
const fruit = "苹果";
const result = "<span>" + name + "喜欢吃" + fruit + "</span>";

console.log(result);

第1、2行代码定义了两个变量,每个都是一个字符串,分别表示名字和水果,第3行的代码看起来有静态的字符串,又有变量,是不是不那么直观?

有了模板字符串,那就可以这么写:

const name = "小明";
const fruit = "苹果";
const result = `<span>${name}喜欢吃${fruit}</span>`;

console.log(result);

是不是更加直观了呢?

再上面的代码中

  1. 模板起始符````,称为沉音符/反引号(grave accent),其内容被识别为字符串模板。

  2. 表达式占位符 ${<expression>}为JavaScript的有效表达式(如 name, 1==2等),因此${<expression>}并不是简单的占位符那么简单了。

更复杂的用表达式的例子:

const name = "小明";
const fruit = "苹果";
const count = 10;
const result = `${name}吃了${count > 3 ? "很多": count}个${fruit}`;

console.log(result);

不过由于嵌套了表达式的模板字符串不是那么好读,一般都是先用变量来表示结果,再用在模板字符串里。

特殊字符

不管使用哪种引号来表示一个字符串,那么这个引号前后必须是一样的,并且字符串中间不能出现所使用的引号。

比如这些例子中就是有问题的字符串:

'Tom's cat';
"这是一个"好"天气";
`grave accent is "`"`;

可以看出上面的字符串表示都有问题,代码编辑器不能正确高亮出字符串的开始与结束,因此在执行的时候,肯定会出错!

为了把中间的引号视作字符串的一部分,那么可以用反斜线(\)来表示这是一个特殊的字符,而不是用来表示字符串的引号。因此,\也称作转义符。

于是,上面的错误的字符串可以这么表示:

'Tom\'s cat';
"这是一个\"好\"天气";
`grave accent is "\`"`;

JavaScript里还有一些其他字符,不能直接输入,但可以使用转义符和其他字符合起来表示。

这里列一些常见的转义字符:

转义字符 含义
\b 退格字符(Back Space)
\f 换页符
\n 换行符
\r 回车符
\t 制表符(Tab)
' 单引号
" 双引号
\ 反斜杠

字符串操作

上一节介绍数值类型的时候,介绍过数值类型有相应的运算符,字符串也是有一些类似的运算符的。常见的是连接(Concatenation)字符串。这种操作在“模板字符串”里也提到过,不过推荐的做法是用模板字符串。不光可以连接字符串,也可以和其他类型一起连接。

这是一个和数字连接的例子:

const boy = "李雷";
const age = 15;
const result = `${boy}已经${age}岁了`;
console.log(result);
模板字符串的性能更好吗?
如果你有其他编程语言的背景,也许认为+号在JS里性能很差,也许以前如此。但由于浏览器技术的发展及对JS执行效率的优化,+号和模板字符串的性能在主流浏览器上实际上是差不多的。不推荐使用+号,不是性能的原因,而是模板字符串写的代码更易读,也更先进。