JS ES新特性 模板字符串
作者：一碗周
这篇文章主要介绍了JS ES新特性模板字符串,模板字符串即Template String是增强版的字符串，使用反引号(```)来代替谱通字符串中的用双引号和单引号,更多相关介绍,需要的朋友可以参考下面文章的详细内容
1.模板字符串是什么
模板字符串(
Template String
)是增强版的字符串，使用反引号(```)来代替谱通字符串中的用双引号和单引号。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
普通用法如下所示：
// 使用 ` 符号包裹的字符串称为模板字符串
let str = `this is str`
console.log(typeof str, str); //string this is str
2.多行模板字符串
ECMAScript 2015
提供的模板字符串与普通字符串的不同的是模板字符串中的空格、缩进、换行都会被保留。
示例代码如下所指示：
let str = `this
is str`
console.log(typeof str, str);
string this
is str
3.带标签的模板字符串
模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为标签模板 功能（
tagged template
）。
let str = 'str'
console.log`this is ${str}`;
// 等同于
console.log(['this is ', ''], str);
原始字符串 应用在带标签的模板字符串中
* 在函数的第一个参数中存在 raw 属性，该属性可以获取字符串的原始字符串。
* 所谓的原始字符串，指的是模板字符串被定义时的内容，而不是处理之后的内容
function tag(string) {
console.log(string.raw[0]);
tag `string test line1 \n string test line2` // string test line1 \n string test line2
let str = 'abcdef';
console.log(str.includes('c')); // true
console.log(str.includes('d')); // true
console.log(str.includes('z')); // false
console.log(str.includes('A')); // false
String.prototype.MyIncludes = function (searchStr, index = 0) {
// 将需要判断的字符串全部改成小写形式
let str = this.toLowerCase()
// 将传入的字符串改成小写形式
searchStr = searchStr.toLowerCase();
return str.includes(searchStr, index)
let str = 'abcdef';
console.log(str.MyIncludes('c')); // true
console.log(str.MyIncludes('d')); // true
console.log(str.MyIncludes('z')); // false
console.log(str.MyIncludes('A')); // true
* startsWith() 方法用来判断当前字符串是否以另外一个给定的子字符串开头， 并根据判断结果返回 true 或 false。
* str.startsWith(searchString[, position])
searchString: 要在此字符串中搜索的字符串。
position: (可选) 从当前字符串的哪个索引位置开始搜寻子字符串， 默认值为 0。
!值得注意的是startsWith() 方法是区分大小写的。
console.log(str.startsWith('a')); // true
console.log(str.startsWith('c', 2)); // true
console.log(str.startsWith('c')); // flase
以下这两个方法通过可以自己扩展一个不区分大小写的。
到此这篇关于JS ES新特性 模板字符串的文章就介绍到这了,更多相关ES模板字符串内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
Web Worker线程解决方案electron踩坑记录
2022-11-11
TS 类型兼容教程示例详解
2022-09-09
Immer 功能最佳实践示例教程
2022-10-10
Zod进行TypeScript类型验证使用详解
2022-09-09
Web Worker线程解决方案electron踩坑记录
2022-09-09
Dom-api MutationObserver使用方法详解
2022-09-09
AntDesignPro使用electron构建桌面应用示例详解
2022-09-09
Ant Design 的Bug修复示例详解
2022-09-09
美国设下计谋,用娘炮文化重塑日本,已影响至中国
2021-11-19
时空伴随者是什么意思?时空伴随者介绍
2021-11-09
工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终
2021-11-05
2022年放假安排出炉：五一连休5天 2022年所有节日一览表
2021-10-26
电脑版
-
返回首页
2006-2023 脚本之家 JB51.Net , All Rights Reserved.
苏ICP备14036222号
