解决字符串拼接问题

使用模板字符串，可以省去 ‘+’ 拼接的操作，反引号``之间的视为一个整体

view：

<p v-html="getHtml()"></p>

method：

getHtml () {let h1 = `<h1>这是一个h1元素内容</h1>`return h1}

结果：

通过表达式拼接对象属性

使用 ${} 表达式可以直接拼接对象属性的值：

let user = {name: 'abc'
}
let str = `用户名称为：${user.name}
`
console.log(str)

结果：

通过表达式拼接方法返回值

对于方法同理，我们也可以使用 ${}

getData () {return 123
},
demo () {let str = `用户名称为：${this.getData()}`console.log(str)
}

结果：

ES6 模板字符串用法相关推荐

ES6模板字符串的扩展
1.模板字符串的扩展 1.1传统的Jquery方法 <div class="content"></div><script>let name = ...
后端字段为null，前端使用ES6模板字符串进行展示
项目需求:后端字段为null,前端使用ES6模板字符串展示为空未处理前效果: // ES6的模板字符串可写表达式<template #default="{ row }"&g ...
[ 前端开发 ] ES6模板字符串
ES6模板字符串模板字符串是 ES6 的新特性,他的作用是减少了字符串的拼接操作,提高了程序的可读性接下来看一个栗子
重学ES6 模板字符串
在两三年前,jQuery还是比较主流的开发技术,当我们要为页面添加DOM时,一般,我们是这样写的 $("#container").append('Today is <b> ...
ES6模板字符串【${}配合反单引号一起用】
转自: https://www.cnblogs.com/shihuc/p/10238511.html 先看看JavaScript中两个字符串的效果,就很容易知道模板字符串是个啥东西,其实一点也不新鲜. ...
高级JavaScript #ES6(模板字符串,let,箭头函数,forof,参数增强,解构,class,promise)
模板字符串 1.模板字符串: 只要拼接字符串都用模板字符串代替+a.整个字符串包裹在一对儿反引号 ` ` 中b.反引号``中支持换行 c.反引号中需要动态生成的内容必须放在${}里d. ${}里: ...
ES6 模板字符串 ``
参考原文链接 1. 使用JavaScript输出字符串,通常是下面这样的: console.log("He is <b>"+person.name+"< ...
Vue的模板字符串${}用法
var a = 1; console.log('一共有'+a+'个鸡蛋!') 使用模板字符串 console.log(`一共有${a}个鸡蛋!`)
es6模板字符串中标签模板作为参数时产生空元素的问题
当模板字符串作为标签模板使用时,标签函数接受到的参数分别为(arr,-values) arr:模板字符串中所有那些没有变量替换的部分 -values:各个变量替换后的值即 let a = 'Oh!' ...
es6模板字符串中循环遍历数据踩坑
应该很少有这种需求,需要在模板字符串利循环遍历数据,现在框架都有自己模板语法. 我这里踩的坑是,我在模板字符串中用forEach,map遍历循环时,返回值一直是一个undefined 用for循环re ...

ES6 模板字符串用法

解决字符串拼接问题

通过表达式拼接对象属性

通过表达式拼接方法返回值

ES6 模板字符串用法相关推荐

最新文章

热门文章