您现在的位置是:首页 > Javascript
当前栏目
js模板字符串
2023-03-31 10:44:16 时间
模板字符串(模板字面量)
ES6 中引入了模板字符串,让我们省去了字符串拼接的烦恼。下面一起来看看它的特性。
在模板字符串中插入变量
以前,让字符串进行拼接的时候,是这样做的:(传统写法的字符串拼接)
var name = 'smyhvae';
var age = '26';
console.log('name:' + name + ',age:' + age); //传统写法
这种写法,比较繁琐,而且容易出错。
现在,有了 ES6 语法,字符串拼接可以这样写:
var name = 'qianguyihao';
var age = '26';
console.log('我是' + name + ',age:' + age); //传统写法
console.log(`我是${name},age:${age}`); //ES6 写法。注意语法格式
注意,上方代码中,倒数第二行用的符号是单引号,最后一行用的符号是反引号(在 tab 键的上方)。
参考链接:
在模板字符串中插入表达式
以前,在字符串中插入表达式的写法必须是这样的:
const a = 5;
const b = 10;
console.log('this is ' + (a + b) + ' and
not ' + (2 * a + b) + '.');
现在,通过模板字符串,我们可以使用一种更优雅的方式来表示:
const a = 5;
const b = 10;
// 下面这行代码,故意做了换行。
console.log(`this is ${a + b} and
not ${2 * a + b}.`);
打印结果:
this is 15 and
not 20.
模板字符串中可以换行
因为模板字符串支持换行,所以可以让代码写得非常美观。
代码举例:
const result = {
name: 'qianguyihao',
age: 28,
sex: '男',
};
// 模板字符串支持换行
const html = `<div>
<span>${result.name}</span>
<span>${result.age}</span>
<span>${result.sex}</span>
</div>`;
console.log(html); // 打印结果也会换行
打印结果:
模板字符串中可以调用函数
模板字符串中可以调用函数。字符串中调用函数的位置,将会显示函数执行后的返回值。
举例:
function getName() {
return 'qianguyihao';
}
console.log(`www.${getName()}.com`); // 打印结果:www.qianguyihao.com
模板字符串支持嵌套使用
const nameList = ['千古壹号', '许嵩', '解忧少帅'];
function myTemplate() {
// join('') 的意思是,把数组里的内容合并成一个字符串
return `<ul>
${nameList.map((item) => `<li>${item}</li>`).join('')}
</ul>`;
}
document.body.innerHTML = myTemplate();
效果如下:
相关文章
- JavaScript 中的 apply、call、bind
- C4模型,架构设计图的脚手架,你值得拥有
- Spring Boot自动配置原理懂后轻松写一个自己的starter
- 【Oculus Interaction SDK】(十)在 VR 中使用手势识别
- 前端和后端分别做什么?
- 记录一次vue部署docker步骤
- Dapr v1.10.0 版本已发布
- 夭寿啦!我的网站被攻击了了735200次还没崩
- 不花钱几分钟让你的站点也支持https
- 前端性能优化百问大杂烩
- 【Oculus Interaction SDK】(九)使用控制器时显示手的模型
- 【Oculus Interaction SDK】(七)使用射线进行交互(物体 & UI)
- 【大型软件开发】浅谈大型Qt软件开发(四)动态链接库的宏冲突问题、COM组件开发的常见问题
- 【Oculus Interaction SDK】(六)实体按钮 & 按压交互
- 【Oculus Interaction SDK】(五)设置不同的抓握手势
- 【Oculus Interaction SDK】(三)限制可操作物体的移动 / 旋转
- JavaScript 高阶函数
- 在 SpringBoot 项目中简单实现 JWT 验证
- avalonia自定义弹窗
- Spring在Filter中记录Web请求Request和返回Response的内容及时长