Skip to content

模板字符串 ​

字符串一共有三种写法,分别是双引号,单引号和反引号,前面提到过,在 JS 中,双引号和单引号所表示的字符串是完全等价的,没有任何区别,而反引号包裹的字符串称为模板字符串,模板字符串相比于单引号和双引号的字符串,有非常多的优势。

模板字符串中最大的优势体现在字符串的拼接,在模板字符串中,可以使用 ${表达式} 来很轻松地进行字符串拼接,如下例所示

js
var user = {
	name:"凌凌",
	age:23,
	gender:"男",
}
//如果使用普通字符串
console.log("我叫"+user.name+",今年"+user.age+"岁,性别是"+user.gender);

//如果使用模板字符串
console.log(`我叫${user.name},今年${user.age}岁,性别是${user.gender}`);

可以看到,当在模板字符串中使用 ${表达式} 语法的时候,相当于用表达式的值直接替换掉这个位置,相当于在字符串的这个位置插入了一个表达式的值,这种行为我们可以称为插值。

同时,模板字符串还有一些优势。

js
var code = "
	var a = 1;
	a = 2;
";

如果我需要一个变量,这个变量保存的内容是一段代码,但是一般情况下,我们书写代码都就需要换行对吧,但如果像上面这种写法,是会直接报错的,可见对于单引号以及双引号的字符串而言,其内部是不能换行的。至于为什么不能换行,因为每一行末尾都会有一个换行字符,在 JS 中的普通字符串里,是不能包含换行字符的。

这样报错就很显然了,这个问题的解决方案也很简单,那就是转义字符。

js
var code = "\
	var a = 1;\
	a = 2;\
";

只要我们按照以上写法,在每一行的末位,使用 \ 将末位的换行字符转义为普通的空白字符,此时就没问题了。

但在模板字符串中,允许包含换行字符,如下所示:

js
var code = `
	var a = 1;
	a = 2;
`;

对于模板字符串来说,这样直接写就可以,这也是模板字符串的第二个作用。

类型转换不会影响原本的数据 ​

在 JS 中,经常会出现类型转换,但类型转换并不影响原本的数据。

js
var x = "1";
var y = 2;
console.log(x+y);//此时发生了类型转换,x为字符串1,此时转换为了数字1,返回结果为1*2=3
//但此时x本身的值并没有改变
console.log(x,typeof x);//可以看到x依旧是字符串1

通过上面的例子可以知道,类型转换只是运算过程中的临时转换,只要变量没有被重新赋值,它的值就不会发生改变。

赋值运算符的补充 ​

我们前面介绍的赋值运算符为 = ,实际上,还有以下赋值运算符。

  • +=
  • -=
  • *=
  • /=
  • %=
  • **=

这几个赋值运算符可以看做是一种简写。

js
x += y;//等价于x = x + y
x -= y;//等价于x = x - y
x *= y;//等价于x = x * y
x /= y;//等价于x = x / y
x %= y;//等价于x = x % y
x **= y;//等价于x = x ** y

其实要解释起来也很简单,以 += 为例,对于一个变量 x,我经常有这么一个需求,就是让 x 变量的值加上 3,但如果直接写 x+3,这样 x 变量的值本身没有变化,要让 x 加上 3,必须写成 x = x + 3,即让 x 的值加 3,然后重新赋值给 x。这类需求非常常见,所以官方就提供了这么一个速写方式,即 x += 3 来替换前面的操作。

这里有一个易错点,这几个运算符均为赋值运算符,优先级非常低,所以 x *= 1+2 应该等价于 x = x * (1+2) 而不是 x = x * 1 + 2,注意优先级。

我们知道,加号不仅可以用于数值运算,还可以用于字符串拼接,这里也同理

void 运算符 ​

这个运算符的作用就是,执行表达式,并且返回 undefined

该运算符也有两种写法

  • 普通写法:void 表达式
  • 函数写法:void(表达式)

这个运算符本质上就是把表达式运行一次,并且返回结果永远是 undefined,这个功能很显然,比较扯淡,所以我们很少用到。

逗号运算符 ​

这个也很少见,基本不会用到,了解即可。

表达式1,表达式2;

其作用为,依次运行两个表达式,返回第二个表达式的值。

逗号运算符的优先级相当低,比赋值运算符还要低

以笔记为镜,可以知得失