编程教育资源分享平台

网站首页 > 技术文章 正文

小白学JS发现了好用到爆的增强版字符串——模板字符串

luoriw 2024-01-17 11:17:26 技术文章 18 ℃ 0 评论

昨天学习了JS相关的基础知识,了解了JS变量、常量的声明,以及let、const的区别,今天学习了字符串模板,发现这真是一个好东西,非常实用,下面我把今天所学的内容总结梳理一下,把重点知识跟大家分享一下,也便于日后我复习所用。

一、模板字面量

模板字面量是在字符串中允许插入表达式的字符串字面量,我们可以使用多行字符串和字符串的插值功能。在ES2015(即:ES6)规范的先前版本中被称为“模板字符串”。

  • 语法

` string `

` string ${expression} `

` string ${expression} string `

  • 解释

模板字符串是增强版的字符串(Plus+),使用反引号(` `)来替代普通字符串中的单双引号,其中${expression}表示占位符。

注意在模板字符串中如果想使用反引号(`)需要加一个转义符(\),即:\`

  • 普通字符串
console.log('This is my first JS Code'); // This is my first JS Code
  • 效果图:

普通字符串

  • 多行字符串

在以前的字符串中,如果我们想要多行字符串,需要用到换行符(\n),例如:

console.log('This is my first JS Code \n' + 
'This is my second JS Code');
  • 效果如图:

多行字符串

但是,现在可以利用模板字符串简化这个问题:

console.log(`This is my first JS Code
This is my second JS Code`);
  • 字符串中嵌入变量、表达式

传统的JS表达式需要这样写:

let num = 30;
let price = 100;
let res = '商品数量' + num + ', 单价:' + price + '元,总计:' + num * price;

使用上述传统的表达式写起来看着非常的乱,不直观,有时候还容易把连接符(+)写漏掉了,使用了ES6的模板字符串可以很好的避免这个问题:

res = `商品数量:${num},单价:${price},总计:${num * price}`;
console.log(res); // 商品数量:30,单价:100,总计:3000

以上结果都输出:

商品数量:30,单价:100,总计:3000

  • 标签函数

标签可以用函数来解析模板字符串。标签函数的第一个参数是一个包含了字符串值的数组,剩余的参数与表达式相关。

let num = 10;
let price = 99;

function show(strings, var1, var2) {
    console.log(strings);
    console.log(var1, var2);
}

show `商品数量:${num}单价:${price}总计:${num * price}`;
  • 输出结果如图:

由上图可以看出,strings的值是一个由多组字符串组成的数组,va1,var2的值分别为num和price的值,由此结果可以很明显的看到,在使用标签函数时,模板字符串会被分割成多个部分,然后传入标签函数中进行处理,并且是以${expression}为分隔符进行分割的。从这个结论我们可以做一个总结:

  1. strings:以${}为分隔符分割得到的字符串数组;
  2. var1:模板中第一个${}的值;
  3. var2:模板中第二个${}的值;
  4. 如果还有var3,var4,var5...等变量,那么就以此类推即可。

以上就是我所学的模板字符串的几个常用的方法,总体感觉还不算是太难,上手很容易,根据我所学的内容,我对模板字符串做了如下总结:

  • 在表示多行字符串时,所有的空格、缩进、换行都将被保留在输出中;
  • 表达式大括号内(${})可以放任意的JavaScript表达式,并进行运算,以及对象属性的引用;
  • 可以调用函数;
  • 模板字符串可以嵌套。

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表
最新留言