系列
JavaScript教程
字符串(String)
包含零个、一个或多个字符的文本称为字符串。
字符串是非常重要的数据类型之一了,比如我们的姓名、地址等都是字符串类型来表示的。编程中很多复杂的问题,都是和字符串相关的,比如字符查找、匹配等等。
字符串的表示
在代码编辑区里,输入的都是符号,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);
是不是更加直观了呢?
再上面的代码中
-
模板起始符````,称为沉音符/反引号(grave accent),其内容被识别为字符串模板。
-
表达式占位符
${<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);