ES6模板字符串的基本使用

ES6新增了模板字符串,让我们拼接字符串时更方便

注意:切记使用反引号作为字符串的定界符分隔的字面量

1.拼接

在我们模板字符串出现之前,我们想要拼接字符串是比较麻烦的

javascript 复制代码
	const name = "杰克";
	const age = 18;
	// 以前的拼接字符串
	console.log("大家好,我的名字叫"+name+",我今年"+age+"岁")

现在我们有了模板字符串,拼接起来就会简单许多

模板字符串使用反引号 `` 作为字符串的定界符分隔的字面量

javascript 复制代码
    const name = "杰克";
    const age = 18;
    // 模板字符串,切记使用反引号
    console.log(`大家好,我的名字叫${name},我今年${age}岁`)

2.换行

以前我们用双引号或者单引号编写字符串时,如果出现一行装不下的情况下,我们需要使用+号来拼接

javascript 复制代码
    const name = "杰克";
    const age = 18;
    // 一行装不下我们需要用+来拼接
    console.log("大家好,我的名字叫杰克"
    +"今年18岁了")

现在我们有了模板字符串,就可以更简单的实现换行遇到的问题

javascript 复制代码
    const name = "杰克";
    const age = 18;
    // 一行装不下我们需要用+来拼接
    console.log(`大家好,我的名字叫杰克
    今年18岁了`)

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

相关推荐
一只小风华~12 分钟前
学习笔记:Vue Router 中的链接匹配机制与样式控制
前端·javascript·vue.js·笔记·学习·ecmascript
Jerry_Rod22 分钟前
react+umijs 项目快速学习
前端·react.js
京东云开发者27 分钟前
浅析cef在win和mac上的适配
前端
uhakadotcom34 分钟前
在chrome浏览器插件之中,options.html和options.js常用来做什么事情
前端·javascript·面试
西瓜树枝38 分钟前
Chrome 扩展开发从入门到实践:以 Cookie 跨页提取工具为例,拆解核心模块与交互逻辑
前端·javascript·chrome
gplitems1231 小时前
Download:Blaxcut - Barbershop & Hair Salon WordPress Theme
前端
拜无忧1 小时前
【DEMO】互动信息墙 - 无限流动版-点击放大
前端
AliPaPa1 小时前
你可能忽略了useSyncExternalStore + useOptimistic + useTransition
前端·react.js
parade岁月1 小时前
nuxt和vite使用环境比变量对比
前端·vite·nuxt.js