ES6特性之:模板字符串

简介: 模板字符串为构造多行字符串和字符串拼接带来了更加方便的方式。多行字符串之前,我们如果要构造一个多行,我们需要在字符串中自己加入换行符\n,就像这样:var lines = "text line one\ntext line two";//"text line one//text line two"上面的看起来有点乱,让我们写的再好看直观一点:var lines2 = "text line one\n" + "text line two";可以再怎么写,总是觉得不是很优雅美观,尤其是文本内容比较多的时候。

模板字符串为构造多行字符串字符串拼接带来了更加方便的方式。

多行字符串

之前,我们如果要构造一个多行,我们需要在字符串中自己加入换行符\n,就像这样:

var lines = "text line one\ntext line two";
//"text line one
//text line two"

上面的看起来有点乱,让我们写的再好看直观一点:

var lines2 = "text line one\n" 
           + "text line two";

可以再怎么写,总是觉得不是很优雅美观,尤其是文本内容比较多的时候。模板字符串的出现,极大的改善了这一痛点:

var lines = `
text line one
text line two
`

是不是干净整洁多了?

字符串拼接

模板字符串只所以叫“模板”,当然是因为它支持内嵌表达式,借助这一特性,我们可以很容易的实现字符串拼接:

var name = "Kevin";
var age = 18;

//老的做法:
var message = "Name: " + name + ", Age: " + age;
// Name: Kevin, Age: 18

//模板字符串的做法:
var message2 = `Name: ${name}, Age: ${age}`;

也可以做一些简单的计算:

var num1 = 10;
var num2 = 20;

var result = `${num1} + ${num2} = ${num1 + num2}`;
// 10 + 20 = 30

标签化模板

标签化模板(Tagged Template Literals)是一个高级特性,同一个模板字符串可以通过使用不同的标签,对模板进行进一步处理,输出不同的结果。

var name = "Kevin";

morning`Hello,${name}`;  // Good morning, Kevin
evening`Hello,${name}`;  // Good evening, Kevin

等一下!上面的程序是怎么回事?morning,evening做了什么?

其实,这里的morning,evening就是所谓的标签(Tag)了,它们其实就是一个函数:

function morning(strings, ...values) {
  return "Good morning, " + values[0];
}

function evening(strings, ...values) {
  return "Good evening, " + values[0];
}
  • 标签函数的第一个参数是一个数组,它包含的值是模板字符串中除去表达式的那些部分:
var name = "Kevin";
var age = 18;

//比如我们有如下模板字符串
var template = `Name: ${name}, Age: ${age}`;

//则在标签函数中的第一个参数strings就为:
//strings为 ["Name: ", ", Age: ", ""]
  • 标签函数的第二个参数是个可变参数,它包含了填充模板字符串的那些表达式的值,就按上面的代码例子,那我们的values参数值就为:
// values为 ["Kevin", 18]
目录
相关文章
|
23天前
|
存储 监控 对象存储
基于YOLO11的道路积水视觉检测:从数据集构建到云上训练实践
本文介绍基于YOLO11的道路积水视觉检测实践,涵盖数据集构建(5275张图片、7155个标注框)、云上训练部署及工程化落地要点,适用于城市内涝预警与智慧交通场景,助力开发者快速实现鲁棒、可复现的积水识别系统。(239字)
基于YOLO11的道路积水视觉检测:从数据集构建到云上训练实践
|
2月前
|
人工智能 JSON 搜索推荐
# AI聊天记录如何批量导出?6种主流方案详解(附Word/PDF解决方案)
本文系统介绍六种AI聊天记录导出方案:官方导出(完整备份)、浏览器插件(轻量便捷)、Markdown归档(结构化长期保存)、Obsidian/Logseq知识库(深度管理)、Pandoc批量转换(开发者高效)、DS随心转(一键办公交付),助你科学归档、高效复用AI产出。
1169 0
|
10月前
|
人工智能 运维 安全
2025年工作流自动化的15个趋势,如何影响企业的业务?
越来越多企业正通过自动化与智能化升级工作模式,聚焦科技、制造、医疗三大领域。从RPA、AI到低代码平台,技术赋能提升效率、保障安全;智能制造优化运维;智慧医疗减轻负担。超自动化推动流程互联,让员工更专注创新与核心事务,实现高效协同与可持续发展。
610 1
|
传感器 供应链 安全
IIoT 与 IoT:详细比较
【8月更文挑战第23天】
1284 4
|
12月前
|
缓存 自然语言处理 JavaScript
Github 3k+ star,中后台管理系统框架,支持多款 UI 组件库,兼容PC、移动端!比商业系统还专业!!
Fantastic-admin/basic 是基于 Vue3 与 TypeScript 的中后台管理系统框架,支持多款 UI 组件库,如 Element Plus、Arco Design、Naive-UI 等。它提供完整的项目结构、权限控制、国际化、多级缓存标签页等功能,兼容 PC、平板及移动端,适合快速搭建企业级后台应用。框架具备高度可定制性,拥有 3k+ GitHub Star,生态完善,适合中小团队和个人开发者提升效率。
837 2
|
数据采集 监控 大数据
大数据项目管理:从规划到执行的全景指南
大数据项目管理:从规划到执行的全景指南
316 4
|
存储 编译器 芯片
【计算机组成原理】知识点巩固 - 存储器概述
【计算机组成原理】知识点巩固 - 存储器概述
11005 276
|
调度 索引
NR PUCCH(一) PUCCH format 0/1
NR中PUCCH物理信道用来发送上行控制信息Uplink Control Information(UCI),当然UCI也可以在PUSCH上发送。UCI 内容包括:CSI,HARQ ACK/NACK ,SR 及上述三者的组合信息。
|
关系型数据库 MySQL 应用服务中间件
[Docker]容器内文件修改
【8月更文挑战第21天】[Docker]容器内文件修改
1328 13

热门文章

最新文章