用ES6中的模板字符串实现在字符串中添加变量和字符串换行

最新推荐文章于 2023-07-24 16:48:59 发布

cake_eat

最新推荐文章于 2023-07-24 16:48:59 发布

阅读量1.7w

点赞数 6

分类专栏： ES6 文章标签： javascript js es6

本文链接：https://blog.csdn.net/cake_eat/article/details/108991253

版权

11 篇文章 0 订阅

订阅专栏

它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

例如：

var str1 = '你好吗' +
    '李华';
    
var str2 = `你好吗
李华`;

console.log(str1);
console.log(str2);

输出结果：
在这里插入图片描述
注意：上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

上面代码中，所有模板字符串的空格和换行，都是被保留的，比如

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

模板字符串中嵌入变量，需要将变量名写在${}之中。

var uname = '李华';

console.log(`你好 ${uname} `);

输出结果：
在这里插入图片描述
大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。

var x = 1;
var y = 2;
console.log(`${x}+${y}=${x+y}`);

var obj = {
    uname:'李华',
    age:18
}

console.log(`${obj.uname}的年龄是${obj.age}`);

输出结果：
在这里插入图片描述
模板字符串之中还能调用函数。

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。
如果模板字符串中的变量没有声明，将报错。

// 变量place没有声明
var msg = `Hello, ${place}`;
// 报错

由于模板字符串的大括号内部，就是执行JavaScript代码，因此如果大括号内部是一个字符串，将会原样输出。

`Hello ${'World'}`
// "Hello World"

关注