当前位置: 首页 > 编程笔记 >

ES6学习教程之模板字符串详解

陶高扬
2023-03-14
本文向大家介绍ES6学习教程之模板字符串详解,包括了ES6学习教程之模板字符串详解的使用技巧和注意事项,需要的朋友参考一下

模板字符串(template strings)

ES6 中引进的一种新型的字符串字面量语法 - 模板字符串。书面上来解释,模板字符串是一种能在字符串文本中内嵌表示式的字符串字面量。简单来讲,就是增加了变量功能的字符串。

ES6为我们提供了模板字符串,语法使用反引号`。模板字符串具有以下三个优点:

  • 多行文本
  • 字符串中插入变量
  • 字符串中插入表达式

基本语法

模板字符串和 ES5的字符串的声明一样。

// ES5
var name = 'xixi';
console.log(name);// xixi

// ES6
let name4ES6 = `一步`;
console.log(name4ES6);// 一步

多行文本

在Jquery 盛行的年代,我们经常会拼接 html 片段再进行节点替换。写一段 ES5的代码大家体会一下:

var str = '<html>'
+ '<div>啦拉拉</div>'
+ '<div>xixixi</div>'
+ '</html>';
console.log(str);// <html><div>啦拉拉</div><div>xixixi</div></html>

ES6支持多行文本,上面的代码实现起来就容易多了。

let str4ES6 = `<html>
 <div>啦拉拉</div>
 <div>xixixix</div>
</html>`;

console.log(str4ES6);

可以插入变量或表达式

// ES5
var name = 'xixi';
var age = 27;
var info = 'my name is ' + name + ' , age is ' + age + '.';
console.log(info);// my name is xixi , age is 27.

ES6的模板字符串实现起来就容易好多。关键语法${},其中可以插入任何的 js 表达式。

let name = 'xixi';
let age = 27;

let info = `my name is ${name}, my age is ${age}. just a test ${1 + 10}!`;
console.log(info);// my name is xixi, my age is 27. just a test 11!

总结

ES6模板字符串就是这么的简单这么的好用。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对小牛知识库的支持。

 类似资料:
  • 本文向大家介绍ES6学习教程之对象字面量详解,包括了ES6学习教程之对象字面量详解的使用技巧和注意事项,需要的朋友参考一下 前言 本文主要给大家介绍了关于ES6对象字面量的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。 ECMAScript6使得声明对象字面量更加简单,提供了属性简写和方法简写功能,属性名计算的新特性。 如果可以理解上述三个新特性,可以不必往下阅读。下面

  • ES6引入了一种通过反引号( ` )标记的新的字符串文字类型。 这些字符串文字可以包括换行符,并且有一个新的机制用于将变量插入字符串:

  • 本文向大家介绍Python3字符串学习教程,包括了Python3字符串学习教程的使用技巧和注意事项,需要的朋友参考一下 字符串类型是python里面最常见的类型,是不可变类型,支持单引号、双引号、三引号,三引号是一对连续的单引号或者双引号,允许一个字符串跨多行。 字符串连接:前面提到的+操作符可用于字符串连接,还可以直接把几个字符串连在一起写,另外调用join()方法也可以连接字符串。 只适用于字

  • 问题内容: 我有以下Ecma-Script-6代码 输出如下: 和 我已经能够在此处将字符串串联起来,那么使用模板文字的情形将是什么? 问题答案: 如果像问题示例中那样仅将模板文字与占位符(例如)一起使用,则结果与串联字符串相同。从主观上讲,它看起来更好并且更易于阅读,尤其是对于多行字符串或包含这两者的字符串,因为您不必再​​转义那些字符了。 可读性是一个很棒的功能,但是关于模板最有趣的是Tagg

  • 我有以下ECMAScript 6模板文字的代码: 输出如下所示: 这是小提琴。 我试图寻找确切的区别,但我找不到,以下两种说法有什么区别? 和 我已经能够在这里获得与< code>person.name连接的字符串< code>MyVar,那么在什么场景中使用模板文字呢?

  • 本文向大家介绍深入浅出es6模板字符串,包括了深入浅出es6模板字符串的使用技巧和注意事项,需要的朋友参考一下 本文主要介绍了深入浅出es6模板字符串,分享给大家,具体如下 作为前端开发者避免不了根据后台数据的返回,组装html,渲染页面。举个栗子 有时候还要给标签加一些属性,写起来很不方便,es6提供了模板字符串的方法,简化了这一过程 所有模板字符串的空格和换行,都是被保留的,如果你不想要前后换