1. 全栈程序员必看首页

JavaScript模板字符串

全栈程序员-站长 • • 未分类 • 阅读 5

JavaScript模板字符串JavaScript 模板字符串字符串插值模板字符串标签函数

JS模板字符串

1. 什么是模板字符串 ？

模板字符串：是允许嵌入表达式的字符串（可以使用多行字符串和字符串插值功能）

它的写法，以反引号 ` 开头，以反引号 ` 结尾

let str = `这是一个模板字符串`;

2. 模板字符串的用法

它与一般字符串不同，会保留空格，换行符和缩进

const str = `第一 行 第二行 第三行` console.log(str);

在这里插入图片描述

  • 它还可以进行字符串插值，即将其它值插入到字符串中
let name = 'XiXiHaHa', age = 18; let sayHello = `Hello! My name is ${ 
       name}. My age is ${ 
       age}.` console.log(sayHello);

在这里插入图片描述

3. 模板字符串标签函数

例如：

let a = 1, b = 2; //strings:字符串数组---以${}分分隔符分割得到的数组 //aVal：模板字符串中第一个${}的值 //bVal：模板字符串中第二个${}的值 //abSum：模板字符串中第三个${}的值 function addSum(strings, aVal, bVal, abSum) { 
       console.log(strings); console.log(aVal); console.log(bVal); console.log(abSum); } let abSum = addSum`${ 
        a} + ${ 
        b} = ${ 
        a + b}`;

在这里插入图片描述

让我们通过一个例子来理解一下它的应用：

let a = 1, b = 2, c = 3; // 由于参数不确定，可以使用剩余参数在这里 function addSum(strings, ...val) { 
       return strings[0] + val.map((e, i) => `${ 
        e}${ 
        strings[i + 1]}`) .join(''); } let abSum = addSum`${ 
        a} + ${ 
        b} = ${ 
        a + b}`; console.log(abSum); let abcSum = addSum`${ 
        a} + ${ 
        b} + ${ 
        c} = ${ 
        a + b + c}`; console.log(abcSum);

在这里插入图片描述

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/231871.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号