ES6系列之---模板字符串

最新推荐文章于 2025-06-12 17:16:37 发布

keji_123

最新推荐文章于 2025-06-12 17:16:37 发布

阅读量266

点赞数

CC 4.0 BY-SA版权

分类专栏：平时学习笔记

本文链接：https://blog.youkuaiyun.com/keji_123/article/details/78444289

平时学习笔记专栏收录该内容

35 篇文章

订阅专栏

本文介绍ES6中模板字符串的功能及使用方法，演示了如何利用模板字符串简化字符串拼接过程，提高代码可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES6提供的模板字符串，使字符串拼接变的简单易懂

let flag=true;
let html=`<ul>
            <li>首页</li>
            <li>${'联系我们'}</li>
            <li class="${flag?'show':'hide'}"></li>
          </ul>`
console.log(html)

输入结果为：

             <ul>
                <li>首页</li>
                <li>联系我们</li>
                <li class="show"></li>
             </ul>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

keji_123

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

ES6系列之模板字符串

回忆的夏天

01-05

349

模板字符串是ES6中非常重要的一个新特性，这个特性使得处理相关业务变得更加容易。基础用法 let a = `hello world`; console.log(a); // hello world 注意这里不是双引号，而是反撇号` 在模板字符串中，还可以拼接html元素，同时空格、缩进、换行都会被保留，并且如果模板字符串中的变量没有声明，将报错。 let str = ` <div...

js es6系列教程 - 新的类语法实战选项卡(详解)

10-19

- 文中虽然主要讲解了ES6中的类和原型链，但整个教程也可能会涉及ES6的其他新特性，如箭头函数、解构赋值、模板字符串、const和let变量声明等，这些特性都是ES6对JavaScript语言核心部分的重要增强。综上所述，...

参与评论您还未登录，请先登录后发表或查看评论

es6 模板字符串中绑定事件的方法

jQuery,CSS,Asp.net及前端开放问题汇总

09-27

8760

step1: 模板字符传中写法 renderDom() { return ` <div data-action="goDetail" data-url="${item.clickUrl}" class="uliao-news-item"> <h1>${item.title}</h1> &...

模板字符串使用点击事件【VUE3】

最新发布

m0_63026408的博客

06-12

320

1.在字符串里的点击事件是原生的onclick2.原生的函数getDownUp是定义在window全局对象上的然后使用这个定义好的点击事件 const goDetails=(val)=>{......}

使用es6模板字符串之后点击事件不生效

zhang_xiao_xie的博客

03-25

3344

1.vue中定义@click不生效 vue中开始我使用的@click绑定方法，显而易见点击是没有触发的。后面百度上很多说使用onclick方式绑定结果还是没有生效。具体原因为什么还没有很清楚，感觉应该是因为onclick绑定的事件，并不能在vue实例之中触发吧，然后我又将方法放到了script标签里结果还是没能触发。最后只能使用原生js获取到需要点击的元素，从而实现点击事件。 //点击的元素。需要确保有创建该元素 let domClick = document.querySelectorAll('

使用es6模板字符串嵌入变量，并实现循环

weixin_44471622的博客

05-12

4450

模板字符串支持嵌入变量，只需要将变量名写在 ${} 之中。在模板字符串中，遍历数组，生成循环结构。 let arr=['aaa','bbbb','c','dd','f'] let temp=`<ul> ${arr.map(item=>{ return `<li>${item}</li>` }).join('')} </ul>` console.log(temp); /*<ul> <li>aa

es6引用模板字符串本身（不是很懂）

TSeven37的博客

08-26

555

需要引用模板字符串本身，在需要时执行，可以像下面这样写。 // 写法一 let str = 'return ' + '`Hello ${name}!`'; let func = new Function('name', str); func('Jack') // "Hello Jack!" // 写法二 let str = '(name) => `Hello ${name}!`'; l...

es6-lib-template:基于 babel.js 的 ES6 库的模板项目

06-05

Babel通过一系列称为“preset”的配置，可以处理各种ES6+的新特性，如箭头函数、类、模板字符串、解构赋值等。 **ES6新特性详解** 1. **箭头函数**：箭头函数提供了更简洁的函数定义方式，例如 `const add = (a, b...

es6-angular-test:使用 Angular 测试 es6 特性（基于官方种子，没有 gulpgrunt）

07-14

在ES6中，引入了一系列新的语法特性，如类（Class）、箭头函数（Arrow Function）、模板字符串（Template Literal）、解构赋值（Destructuring）、let和const（块级作用域）、Promise（异步编程）、模块（Module）等...

JavaScript-Avancado-II-ES6-orientacao-a-objetos-e-padroes-de-projetos:课程内容概述

05-15

3. **模板字符串（Template literals）**：使用反引号(`)定义的字符串，可以方便地插入变量和表达式，提高了字符串操作的便捷性。 4. **解构赋值（Destructuring）**：允许从数组或对象中提取数据，直接赋值给新的...

JavaScript --- ES6 涵盖（ES6 -- ES11）语法学习

02-24

ES6引入了模板字符串，用反引号（`）包裹，可以方便地插入变量，支持多行书写。例如： ```javascript let name = 'Alice'; console.log(`Hello, ${name}!`); // 输出 "Hello, Alice!" ``` 三、let 和 const `let`...

Vue中的字符串模板的使用

12-09

1、HTML模板和字符串模板 HTML模板：直接在HTML页面挂载的模板。（即非字符串模板）非字符串模板：在单文件里用指定的模板，换句话说，写在 html 中的就是非字符串模板。 字符串模板：在js字符串中定义的模板。 2、Props属性：HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 props属性需要转换为相对应的 kebab-case (短横线分隔式命名)：（1）、HTML模板： Vue.component('child', { // 在 JavaScript 中使用 camel

es6字符串模板实现点击方法

weixin_43374521的博客

11-18

4295

es6字符串模板实现点击方法第一次尝试第二次尝试第三次尝试最后总结最近在做项目时，遇见了一个需要在字符串模板里添加点击方法的功能。不知道格式应该怎么写，于是便开始了各种尝试。我的代码如下，其中item是循环的每一项，地图上的marker点有多个。 let content = ` <div style="text-align: center; padding: 20px 5px;width: 300px;"> <div style="background: #7a90ff;color

Vue中的方法和事件绑定

m0_59345890的博客

08-30

1304

self 其他元素的事件触发时事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件, 虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素。3、ES6的箭头函数中的this就不是vm，因为箭头函数中的this跟谁调用无关，指向上一个不是箭头函数的函数的this==>因此推荐事件的函数采用ES6的对象的方法写方法这种写法不推荐。我们也可以打印一下事件对象，看一下它的事件链，在绑定事件的方法传入$event,...

模板字符串使用点击事件【VUE】

m0_52743009的博客

09-30

6156

vue 中模板字符串使用点击事件以及书写样式

字符串模板添加事件& echarts tooltip 中添加点击事件

古之成大事者，不惟有超世之才，亦必有坚韧不拔之志

11-15

1137

字符串模板添加事件及传递参数

模板字符串中，点击事件传参问题

weixin_64482155的博客

02-03

2032

也不知道其中转换出现了什么问题，去网上查了很多方法，什么转义啊，+之类的都不太有效，报各种各样的错误，后来找到一个用JSON.stringify()方法，但没用在模板字符串中，直接用也没啥作用。之后经过不断尝试，最后搞出来一种方法，终于传过去了！传单个数据的时候，是没什么问题，都是些原始类型数据，能解析出来，如上图；最近在做一个地图项目的时候，要用模板字符串去写原生html，其中又有点击事件-onclick，发现传参的时候出现很多问题，就此记录一下。希望有知道的可以指点一番！，包裹的使用的是单引号。

jsp使用es6的模板字符串添加点击事件

roridaisuki的博客

07-27

755

原因：jsp中的el语法和js的es6语法都是使用${}来解析的。的模板字符串`${}`时不生效。

vue3 中模板字符串中添加click方法并传参

lfYexun的博客

12-18

1485

js拼接onClick事件，并把事件绑定到window对象上即可。

React Redux Boilerplate：ES6及Material-UI应用模板

- 模板字面量，一种新的字符串格式，支持字符串插值。 - 解构赋值，一种从数组或对象中提取数据的方式。 - 类和模块，ES6增加了class关键字来创建类，引入了模块化的概念。 ES6语法提高了开发效率并改进了代码的...