ES6系列文章 模板字符串

news/2024/2/29 3:34:40

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

  1. 多行文本
  2. 字符串中插入变量
  3. 字符串中插入表达式

基本语法

模板字符串和 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模板字符串就是这么的简单这么的好用。


https://www.jiucaihua.cn/news/show-2124111.html

相关文章

C#带cookie模拟登录百度

#region 同步通过POST方式发送数据/// <summary>/// 通过POST方式发送数据/// </summary>/// <param name"Url">url</param>/// <param name"postDataStr">Post数据</param>/// <param name"cookie">…

愚蠢的错误:关于C2533错误

今天写了一个类,头文件声明如下:class CConfigManager{public: CConfigManager(void); ~CConfigManager(void);} 结果编译器给我报错:error C2533: CConfigManager::CConfigManager : constructors not allowed a return type 我查了下MSDN,MSDN上面说: 编译器错误 C2533…

TCP/IP 协议簇 端口 三次握手 四次挥手 11种状态集

第1章 概念介绍 1.1 VLAN 1.1.1 什么是VLAN VLAN(Virtual LAN)&#xff0c;翻译成中文是“虚拟局域网”。LAN可以是由少数几台家用计算机构成的网络&#xff0c;也可以是数以百计的计算机构成的企业网络。VLAN所指的LAN特指使用路由器分割的网络——也就是广播域。 1.1.2 划分V…

QT的项目管理文件pro的编写

在QT中&#xff0c;有一个工具qmake可以生成一个makefile文件&#xff0c;它是由项目管理文件pro文件生成而来&#xff0c;pro文件的写法见下表。 qmake变量 说明 举例 #xxxx 注释,从“#”开始&#xff0c;到这一行结束 #for windows TEMPLATE 模块设置 TEMPLATE app …

Android深入四大组件(六)Service的启动过程

前言 此前我用较长的篇幅来介绍Android应用程序的启动过程&#xff08;根Activity的启动过程&#xff09;&#xff0c;这一篇我们接着来分析Service的启动过程。建议阅读此篇文章前&#xff0c;请先阅读Android深入四大组件&#xff08;一&#xff09;应用程序启动过程&#xf…

php下载大文件的方法,PHP大文件及断点续传下载实现代码

一般来说浏览器要同时下载几个文件&#xff0c;比如pdf文件&#xff0c;会在服务器端把几个文件压缩成一个文件。但是导致的问题就是会消耗服务器的cpu和io资源。那有没有办法&#xff0c;用户点了几个文件&#xff0c;在客户端同时下载呢&#xff1f; 支持html5的浏览器是可以…

centos php5.4,centos php 5.4 安装教程

centos php5.4安装方法&#xff1a;首先通过“yum install gcc -y yum install libicu-devel -y”等命令安装php5.4依赖&#xff1b;然后使用命令“make install”安装php5.4即可。centos7 安装php5.4.45安装php5.4.45依赖yum install gcc -yyum install libicu-devel -yyum in…

【转】cocos2dx 3.x 集成protobuf

http://www.cnblogs.com/chevin/p/6001872.html vs2013cocos2dx 3.13.1 这篇博文是集成Lua版本的protobuf&#xff0c;集成C版本的过程也可参考。 主要参考博文地址《cocos2dx 3.x C搭建protobuf环境》&#xff0c;这里的集成方式和参考博文有点不一样&#xff08;这里是直接集…

Duanxx的STM32学习:STM32下载方式选择

前几天熟悉了STM32的启动方式。主要由Boot0和Boot1设置 如今须要解决的就是STM32的下载的问题。 一開始的时候&#xff0c;我选择的是SWD下载。这样的下载方式须要Boot00。Boot10。占用两个线&#xff0c;同一时候须要两个电阻和一个电容&#xff1a; 可是我的设计上须要使用串…

HDU4685 Prince and Princess【强连通】

题意&#xff1a; 有n个王子和m个公主&#xff0c;每个王子都会喜欢若干个公主&#xff0c;也就是王子只跟自己喜欢的公主结婚&#xff0c;公主就比较悲惨&#xff0c; 跟谁结婚都行。然后输出王子可能的结婚对象&#xff0c;必须保证王子与任意这些对象中的一个结婚&#xff0…
最新文章