ES6—字符串模板引擎
字符串模板引擎
ES5中的字符串缺乏多行字符串、字符串格式化、HTML转义等特性。
而ES6通过模板字面量的方式进行了填补，模板字面量试着跳出JS已有的字符串体系，通过一些全新的方法来
解决问题。
1.基本用法
ES5字符串写法：
let message = "我的宠物狗叫黑子，今年16岁了"
将其转化成ES6写法，其实非常简单：
只需把最外围的双引号（"）或者单引号（'） 转化成反引号（`）即可。
let message = `我的宠物狗叫黑子，今年16岁了`
如果想在字符串内部使用反引号，只需使用反斜杠（ ）转义即可
let message = `我的宠物狗叫\`黑子\`，今年16岁了`;
console.log(message); // "我的宠物狗叫`黑子`，今年16岁了"
2.多行字符串
传统的JavaScript语言，输出模板通常是这样写的：
var name = '黑子';
var age = 8;
$('#result').append('我的宠物狗叫 <b>' + name + '</b>\n' +'今年\n' +'<em>' + age+ '</em>岁，\n'+'十分可爱!'
);
但是在ES6中，要获得同样效果的多行字符串，只需使用如下代码：
let name = '黑子';
let age = 8;
$('#result').append(`我的宠物狗叫 <b>${name}</b>今年 <em>${age}</em>岁，十分可爱!`
);
对比两段拼接的代码，模板字符串使得我们不再需要反复使用双引号（或者单引号）了；而是改用反引号标识符
（`），插入变量的时候也不需要再使用加号（+）了，而是把变量放入${ }即可。
也不用再通过写 n 进行换行了，ES6 的模板字面量使多行字符串更易创建，因为它不需要特殊的语法，只需在想
要的位置直接换行即可，此处的换行会同步出现在结果中。简单、清晰、明了。
注意：如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。因此需要特别留意缩进。
console.log(`我的宠物狗叫黑子今年16岁了`);
结果：
//我的宠物狗叫黑子
// 今年16岁了
以上代码中，模板字面量第二行前面的所有空白符都被视为字符串自身的一部分。
如果一定要通过适当的缩进来对齐文本，可以考虑在多行模板字面量的第一行空置并在后面的几行缩进
let html = `
<div><h1>Title</h1>
</div>`.trim();
以上代码中，模板字面量的第一行没有任何文本，第二行才有内容。 HTML标签的缩进增强了可读性，之后再
调用trim()方法移除了起始的空行。
3.字符串中嵌入变量
模板字面量看上去仅仅是普通JS字符串的升级版，但二者之间真正的区别在于模板字面量的变量占位符。
ES5写法：
const age = 8;
const message = '我的宠物狗叫黑子，今年' + age*2 + '岁了' ;
//我的宠物狗叫黑子，今年16岁了
ES6写法：
const age = 8;
const message = `我的宠物狗叫黑子，今年 ${age*2} 岁了` ;
//我的宠物狗叫黑子，今年16岁了
变量占位符允许将任何有效的JS表达式嵌入到模板字面量中，并将其结果输出为字符串的一部分。
如上面的例子，占位符 ${age} 会访问变量 age，并将其值插入到 message 字符串中。
既然占位符是JS表达式，还可以轻易嵌入运算符、函数调用等。
const age = 8;
const message = `我的宠物狗叫黑子，今年 ${(age*2).toFixed(2)} 岁了`;
//"我的宠物狗叫黑子，今年 16.00 岁了"function fn() {return "小黄";
}
`我朋友家的宠物叫${fn()}`
//"我朋友家的宠物叫小黄"4.带标签的模板字符串
要用 ES6 模板实现复杂一点的字符串处理逻辑，要依赖写函数来实现。
幸运的是，除了在模板的插值表达式里想办法调用各种字符串转换的函数之外，ES6 还提供了更加优雅且更
容易复用的方案——带标签的模板字面量（tagged template literals，以下简称标签模板）
标签模板的语法很简单，就是在模板字符串的起始反撇号前加上一个标签。let message = tag`黑子`;
在上面的代码中，tag就是模板标签。tag其实是一个函数，这个函数会被调用来处理这个模板字符串。
4.1 定义标签
let name = '黑子',age = 8,message = tag`我的宠物狗叫${name}，今年${age}岁了`;function tag(stringArr, value1, value2) {console.log(stringArr); //["我的宠物狗叫", "，今年", "岁了", raw: Array(3)]//该数组有一个raw属性，保存的是转义后的原字符串console.log(value1); // 黑子console.log(value2); // 8return;
}
标签函数通常使用不定参数特性来定义占位符，从而简化数据处理的过程
function tag(stringArr, ...values) {console.log(values); // ["黑子", 8]
}
4.2 实际应用
“标签模板”的一个重要应用，就是过滤HTML字符串，防止用户输入恶意内容
var message = filterHTML`<p>${sender} 你好啊</p>`;
function filterHTML(templateData) {var s = templateData[0];for (var i = 1; i < arguments.length; i++) {var arg = String(arguments[i]);// 转义占位符中的特殊字符。s += arg.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");// 不转义模板中的特殊字符。s += templateData[i];}return s;
}
上面代码中，sender变量往往是用户提供的，经过filterHTML函数处理，里面的特殊字符都会被转义。
var sender = '<script>alert("买了个包")</script>'; // 恶意代码
var message = filterHTML`<p>${sender} 你好啊</p>`;console.log(message);
// <p><script>alert("买了个包")</script> 你好啊</p>
即使一个恶意命名的用户，例如黑客向其他用户发送一条骚扰信息，无论如何这条信息都会被转义为普通字符串，
其他用户不会受到潜在攻击的威胁。
标签模板的另一个应用，就是多语言转换（国际化处理）
let name = 'ES6专栏 '; let number = 666;
let chinese = ['欢迎访问','您是第','位访问者'];i18n`Welcome to ${name}, you are the ${number} visitor`; function i18n(stringArr, ...values){let str=''; stringArr.map((item,index)=>{str += (chinese[index] + (values[index] ? values[index] : '' )) });console.log(str)
}
//欢迎订阅ES6专栏 您是第666位访问者5.新增的字符串方法
5.1 查找字符串
在以前在字符串中查找字符串的时候，都是使用indexOf方法。
ES6新增了三个方法来查找字符串 :
includes 方法会在给定文本存在于字符串中的任意位置时返回 true，否则返回 false 。
startsWith 方法会在给定文本出现在字符串开头时返回 true，否则返回 false 。
endsWith 方法会在给定文本出现在字符串末尾时返回 true，否则返回 false 。
var msg = "Hello world!";console.log(msg.startsWith("Hello")); // true
console.log(msg.endsWith("!")); // true
console.log(msg.includes("d")); // trueconsole.log(msg.startsWith("d")); // false
console.log(msg.endsWith("world!")); // true
console.log(msg.includes("x")); // false
每个方法都接收两个参数：需要搜索的文本和可选的起始索引值。
若第二个参数未提供，includes 和 startsWith 会从字符串的起始中开始检索，endsWith 则是从字符串的末尾。
实际上，第二个参数减少了需要检索的字符串的总量。
当提供第二个参数后，includes 和 startsWith 会以该索引为起始点进行匹配
console.log(msg.includes("d", 8)); // true
console.log(msg.includes("d", 11)); // false
console.log(msg.startsWith("d", 10)); // true
console.log(msg.startsWith("d", 9)); // false
endsWith 将字符串的长度与参数值相减并将得到的值作为检索的起始点
console.log(msg.endsWith("d", 11)); // true ( 长度13 - 参数值11 = 起始点2 )
console.log(msg.endsWith("d", 8)); // false ( 长度13 - 参数值8 = 起始点5 )
应用场景：
（1）利用includes检查用户使用的浏览器
if (navigator.userAgent.includes('Chrome')) {console.log("是谷歌浏览器");
} else {console.log("不是谷歌浏览器");
}
（2）利用startsWith检查路径
let urlstr = "http://www.baidu.com";
let urlstr1 = "file:///C:/Users/xxx.html";
console.log(urlstr.startsWith("https://")); //false
console.log(urlstr1.startsWith("file://")) //true
（3）利用startsWith检查文件格式
let path = "111.jpg";
console.log(path.endsWith(".png")); //false5.2 字符串重复 -- repeat方法
接受一个数字参数作为字符串的重复次数。该方法返回一个重复包含初始字符串的新字符串，重复次数等于参数。
例如：
console.log("abc".repeat(4)); // "abcabcabcabc"
let str = "小样儿";
console.log(str.repeat(10)); //小样儿小样儿小样儿小样儿小样儿小样儿小样儿小样儿小样儿小样儿5.3 填充字符串
string.padStart 往字符串前面填充（在字符串前面插入字符串）
string.padEnd 往字符串后面填充（在字符串后面插入字符串）
let str = "Iphone";
let leftStr = "我的";
console.log(str.padStart(str.length + leftStr.length, leftStr));//我的Iphonelet iphone = "Iphone";
let rightStr = "10";
console.log(iphone.padEnd(iphone.length + rightStr.length, rightStr)); //Iphone106.总结
ES6给字符串带来了很多实用性的扩展：
模板字符串、标签模板、repeat函数、includes函数、startsWith函数、endsWith函数、padStart函数、padEnd
函数。
字符串模版的出现让我们再也不用拼接变量了，而且支持在模板里有简单计算操作。
希望大家能动手练习一下，并把这些新特性应用到工作中，很快就掌握了，用起来能让大家的工作更轻松，愉悦。
ES6—字符串模板引擎相关推荐
- php 模板 {{}},PHP字符串模板引擎
这是一个简易的字符串模板引擎.数据库模板引擎.区别于一般基于文件模板的引擎,这里的模板是一个字符串,因此可以将模板存于数据库或其他地方,而且不是编译型引擎,没有缓存文件,因而就不涉及到目录权限问题.模 ...
- ES6 - 字符串模板与新增字符串方法
字符串模板 解决痛点:简化字符串拼接,比如innerHTML,url等 语法格式:反引号 let name = 'murphy'; let age = 18; console.log(`名字${nam ...
- es6 字符串模板拼接
字符串拼接是在日常开发中必不可少的一个环节. 注意:字符串可以用单引号'',或者""双引号,出于方便大家理解,文章以下内容统一使用单引号''! 如果只是一个字符串和一个变量拼接,使 ...
- es6 字符串模板 随手记
错误 正确
- html模板引擎 字符串长度,Web前端模板引擎の字符串模板
这是一个系列文章,将会介绍目前Web前端领域里用到的三种模板引擎技术,它们分别是: 基于字符串的模板 基于Dom操作的模板 基于虚拟Dom的模板 本文是这个系列的第一篇,着重介绍基于字符串的模板引擎的 ...
- ES6学习笔记之字符串模板(巩固复习)
ES6字符串模板 这个举个例子,先大概了解一下什么是字符转模板 <script>let name='Kobe Bryant'let birthday="1978.8.23&quo ...
- es6字符串添加html标签,JavaScript_详解JavaScript ES6中的模板字符串，在 ES6 中引入了一种新的字符 - phpStudy...
详解JavaScript ES6中的模板字符串 在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是 ...
- 深入浅出ES6：模板字符串（`和‘）
反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起 ...
- ES6中新增字符串方法，字符串模板
ES6中新增字符串方法,字符串模板 多了两个新方法 startsWith endsWith 返回的是一个Boolean值 let str='git://www.baidu.com/2123123';i ...
最新文章
- CentOS7配置防火墙
- 【.Net Micro Framework PortingKit – 14】TinyCLR编译与测试
- 如何选择合适的数据库，让游戏更高效可用
- 颜宁分享干货：给实验室博士的一些忠告
- CTF web题 wp：
- 信息学奥赛C++语言：枪声问题
- Spring框架 AOP
- Hacker News 12 月招聘趋势：React 已连续霸榜 19 个月
- div内容居中、隐藏及按钮隐藏写法
- php amp 26472,汉字与UNICODE的转换 通过文件操作
- dbeaver 修改数据_GitHub 上 5 款超好用的数据库 GUI 带你玩转 MongoDB、Redis、SQL 数据库...
- java中如何写前端代码怎么写_如何编写规范的、可维护的前端代码？
- R语言批量生成CaseWhen的解决方案
- ECSHOP模板修改
- 对QT5信号与槽的认识
- PHP 通过身份证号判断年龄（周岁）
- python大数据免费_用python做大数据
- python简单实现经典的图像匹配算法SIFT
- squirrelmail 小松鼠的安装和配置
- 分享一下我用Python接单的个人经历