ES6_04- 模板字符串+标签模板字符串
系列文章目录
提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用
文章目录
- 系列文章目录
- 1. 模板字符串
- 1.1. 写法
- 1.2. 普通字符串
- 1.3. 多行字符串
- 1.4. 嵌入变量
- 1.5. 注意点
- 1.6. 嵌套
- 1.7. 可写成函数
- 1.8. 练习
- 2. 标签模板字符串
- 2.1. 本质
- 2.2. 参数传入
- 2.3. 练习
- 2.3. 应用
1. 模板字符串
1.1. 写法
- 模板字符串（template string）是增强版的字符串，用反引号（`）标识。
``
- 它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
1.2. 普通字符串
此时，用法与""全等。
const a = `in js '/n' is a line-feed.`;a // "in js '/n' is a line-feed."
1.3. 多行字符串
- 字符串内的内容可换行。
- 所有的空格、缩进、换行都会被保留在输出之中。可以用
trim()方法消除。
const b = `In JS this isnot legal.`b // 'In JS this is\n not legal.'console.log(`string text line 1string text line 2`);/* string text line 1string text line 2 */console.log(`string text line 1string text line 2`.trim());
const box = document.querySelector('.box');let htmlStr = `<ul><li><p>你好</p></li></ul>`;box.innerHTML = htmlStr;
1.4. 嵌入变量
- 写法：将变量套入
${}中。 - 用法：
${}中可放入任意JavaScript表达式。如，运算，引用对象属性，调用函数等。
let x = 1;
let y = 2;// 运算
`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"// 引用对象属性
let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"
// 调用函数
function fn() {return "Hello World";
}`foo ${fn()} bar`
// foo Hello World bar
1.5. 注意点
- 如果在模板字符串中需要使用反引号，则前面要用**反斜杠**转义。
let greeting = `\`Yo\`, World!`;greeting // '`Yo`, World!'
如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。
如果模板字符串中的变量没有声明，将报错。
// 变量place没有声明
let msg = `Hello, ${place}`;
// 报错 ReferenceError: place is not defined
- 由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出。
const greeting = `Hello ${'World'}`;greeting // 'Hello World'
1.6. 嵌套
详情见《ECMAScript 6 入门》阮一峰
1.7. 可写成函数
详情见《ECMAScript 6 入门》阮一峰
1.8. 练习
const Jelly = {name: 'Jelly',date: '2022-08-06',todos: [{ name: 'Go to Store', completed: true },{ name: 'Watch the Movie', completed: false },{ name: 'Running', completed: true },]};function renderTodos(todos) {return (`<ul>${Jelly.todos.map(todo => `<li>${todo.name}${todo.completed ? '✔
ES6_04- 模板字符串+标签模板字符串相关推荐
- ES6（二）——字符串模板、标签模板字符串、函数的默认参数、剩余参数、数组对象的展开语法、数值的表示、Symbol
一.字符串模板基本使用 在ES6之前,如果我们想要将字符串和一些动态的变量(标识符)拼接到一起,是非常麻烦和丑陋的(ugly). ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接: 首 ...
- 目标检测标注工具（可自定义生成标签模板）
点击查看项目源码 全新升级,整改为JAR包运行模式,既然是java项目自然支持各个系统 下载JAR包 JDK版本要求:JDK8-JDK10 上不去github的戳这 CSDN 0积分下载 运行方式 j ...
- 【ES9(2018)】String 扩展 标签模板里字符串转义
放松对标签模板里字符串转义的限制, 遇到不合法的字符串转义返回undefined,并且从raw上可获取原字符串. ES9开始,模板字符串允许嵌套支持常见转义序列,移除对ECMAScript在带标签的模 ...
- C#读取Word模板替换相应的字符串（标签）生成新的Word
在平常工作中,生成word的方式主要是C#读取html的模板文件处理之后保存为.doc文件,这样的好处是方便,快捷,能满足大部分的需求.不过有些特殊的需求并不能满足,如要生成的Word为一个表格,只是 ...
- ES6 标签模板与模板字符串
模板字符串 模板字符串使用反引号 () 来代替普通字符串中的用双引号和单引号.模板字符串可以包含特定语法(${expression})的占位符.占位符中的表达式和周围的文本会一起传递给一个默认函数,该 ...
- ES6知识点整理模板字符串和标签模板的应用
ES6 中对字符串进行了扩展,而模板字符串就是一个非常实用的方式,可以在html中实现与变量和方法的混编 之前我们手动拼接字符串的方式 let hello = 'Hello'; let html = ...
- es6模板字符串中标签模板作为参数时产生空元素的问题
当模板字符串作为标签模板使用时,标签函数接受到的参数分别为(arr,-values) arr:模板字符串中所有那些没有变量替换的部分 -values:各个变量替换后的值 即 let a = 'Oh!' ...
- django html过滤,django templates模板过滤器过滤掉字符串含有的html标签
django templates模板过滤器过滤掉字符串含有的html标签 在template用法:{{ myvar|striptags }} 如果myvar的字符串是"吾爱孟夫子,风流天下闻 ...
- vue模板字符串标签动态参数_Vue中的字符串模板的使用
1.HTML模板和字符串模板 HTML模板:直接在HTML页面挂载的模板.(即非字符串模板) 非字符串模板:在单文件里用 指定的模板,换句话说,写在 html 中的就是非字符串模板. 字符串模板:在j ...
最新文章
- AndroidStudio 新建不同的Drawable文件夹
- Windows7 自动更新时遇到故障
- Linux下时间戳的换算方法
- 使用memcache的session入库
- 求正多边形的面积JAVA_第六章第三十六题(几何：正多边形的面积)(Geometry: area of a regular polygon)...
- 设置横坐标刻度_是不是快被Excel的时间刻度逼疯了，教你两招轻松解决
- JQuery之编写弹窗
- 一个会定时执行的方法
- Open3d之点云体素下采样
- GPS定位可以使用物联卡吗？信号稳定吗?
- 钉钉 e应用 mysql_钉钉E应用入门总结
- Oracle单实例数据库迁移到Oracle RAC 环境之(2)--实施篇
- java对外接口开发实例
- win7修复计算机 正常启动不了怎么办,Win7系统无法正常启动怎么办
- JS实现浏览器菜单命令
- 大一python期末总结
- 软件测试/测试开发丨Docker 容器技术与常用命令
- qt连接mdb_【原创】QT数据库学习和以连接Access为例
- 武汉市建筑物矢量数据（Shp格式+带高度）
- 【趣发现】形态各异的区块链和云计算
热门文章