javascript模板字符串怎么使用

这篇文章主要讲解了“javascript模板字符串怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“javascript模板字符串怎么使用”吧！

为菏泽等地区用户提供了全套网页设计制作服务，及菏泽网站建设行业解决方案。主营业务为网站设计制作、成都网站制作、菏泽网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

模板字符串是ES6中引入了一种新的允许嵌入表达式的字符串字面量，是一种增强版的字符串，它使用反引号来代替普通字符串中的用双引号和单引号。通过使用模板字面量，可以在字符串中同时使用单引号和双引号。

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

模板字面量 是允许嵌入表达式的字符串字面量，是ES6 中引入了一种新的字符串字面量。你可以使用多行字符串和字符串插值功能。它们在ES2015规范的先前版本中被称为“模板字符串”。

模板字符串使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（${expression}）的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号（`）时，需要在它前面加转义符（\）。

`\`` === "`" // --> true

模板字符串可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

普通用法如下所示：

// 使用 ` 符号包裹的字符串称为模板字符串
let str = `this is str`
console.log(typeof str, str); //string this is str

多行模板字符串

ECMAScript 2015提供的模板字符串与普通字符串的不同的是模板字符串中的空格、缩进、换行都会被保留。

示例代码如下所指示：

let str = `this 
      is str`
console.log(typeof str, str);
/*
  string this 
      is str
*/

1、带表达式的模板字符串

模板字符串是支持嵌入表达式的，语法结构如下所示：

`${expression}`

示例代码如下所示：

let str1 = `this is str1`
let str2 = `this is str2`
// 只需要将表达式写入 ${} 中
let and = `${str1} and ${str2}`
console.log(and); // this is str1 and this is str2

带标签的模板字符串

模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为标签模板 功能（tagged template ）。

let str = 'str'
console.log`this is ${str}`;
// 等同于
console.log(['this is ', ''], str);

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

原始字符串

在标签函数的第一个参数中，存在一个特殊的属性raw，可以通过它来访问模板字符串的原始字符串，而不是经过特殊替换的字符。

示例代码如下所示：

/*
  原始字符串 应用在带标签的模板字符串中
  * 在函数的第一个参数中存在 raw 属性，该属性可以获取字符串的原始字符串。
  * 所谓的原始字符串，指的是模板字符串被定义时的内容，而不是处理之后的内容
*/
function tag(string) {
  console.log(string.raw[0]);
}
tag `string test line1 \n string test line2` // string test line1 \n string test line2

另外，使用String.raw()方法出功能键原始字符串和默认模板函数和字符串连接创建是一样的。

示例代码如下所示：

let str = String.raw `Hi\n${2+3}!`;
// ，Hi 后面的字符不是换行符，\ 和 n 是两个不同的字符
console.log(str); // Hi\n5!

判断是否包含某字符串

1、includes()方法

includes()方法用于判断一个字符串是否包含在另一个字符串中，根据判断结果返回true或false。

语法结构如下所示：

str.includes(searchString[, position])

参数说明：

• searchString：要在此字符串中搜索的字符串。

• position：(可选) 从当前字符串的哪个索引位置开始搜寻子字符串，默认值为 0。

值得注意的是includes()方法是区分大小写的。

示例代码如下所示：

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

ECMAScript 2015提供的这个includes()方法是区分大小写的，现在我们自己扩展一个不区分大小写的，

示例代码如下所示：

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

2、startsWith()方法

startsWith()方法用来判断当前字符串是否以另外一个给定的子字符串开头，并根据判断结果返回true 或false。

语法结构如下所示：

str.startsWith(searchString[, position])

参数说明：

• searchString：要在此字符串中搜索的字符串。

• position：(可选) 从当前字符串的哪个索引位置开始搜寻子字符串，默认值为 0。

值得注意的是startsWith()方法是区分大小写的。

示例代码如下所示：

let str = 'abcdef';
/*
  * 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

3、endsWith()方法

endsWith()方法用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的，根据判断结果返回 true 或 false。

语法结构如下所示：

str.endsWith(searchString[, position])

参数说明：

• searchString：要在此字符串中搜索的字符串。

• position：(可选) 从当前字符串的哪个索引位置开始搜寻子字符串，默认值为0。

值得注意的是endsWith()方法是区分大小写的。

示例代码如下所示:

let str = 'abcdef';
console.log(str.endsWith('f')); // true
console.log(str.endsWith('c', 3)); // true
console.log(str.endsWith('c')); // flase

以下这两个方法通过可以自己扩展一个不区分大小写的。

感谢各位的阅读，以上就是“javascript模板字符串怎么使用”的内容了，经过本文的学习后，相信大家对javascript模板字符串怎么使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！