模板字符串

模板文字是用反勾（`）字符分隔的文字，允许多行字符串、嵌入表达式的字符串。

`string text``string text line 1string text line 2``string text ${expression} string text`tag `string text ${expression} string text`

示例1：单行、多行字符串

console.log(`yihangzifuc`);
console.log(`duohangzifuc
zheshidierhangle
zheshidisanhangle`);

示例2：嵌入表达式

var a = 1;
console.log(`${a}23456`);

示例3：模板嵌套

var a = 1;
console.log(`${`${a}`}23456`);

示例4：eval + 模板字符串

var a = 1;
var b = "${a}23456";
console.log(eval(`\`${b}\``));
console.log(eval("`"+b+"`"));

示例5：模板字符串获取参数值

var options = {url: "/xxx/${id}/get",
};function getXXX(id) {var url = eval(`\`${options.url}\``);console.log("url is : ", url);
}getXXX(3);
getXXX(4);

示例6：模板字符串获取表单元素的值

<!DOCTYPE html>
<html>
<head><script type="application/javascript">var options = {url: "/xxx/${e.value}/get",};function getXXX(e) {var url = eval(`\`${options.url}\``);console.log("url is : ", url);}</script>
</head>
<body><input id="ipt" value="1" onblur="getXXX(this)"/>
</body>
</html>

参考

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Template_literals
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval

【javascript】模板字符串相关推荐

JavaScript模板字符串传参数
JavaScript模板字符串传参数 JavaScript模板字符串传参数 JavaScript模板字符串传参数 <!DOCTYPE html> <html lang="e ...
javaScript模板字符串、严格模式、编码字节长度
一.模板字符串 var str=`hello`模板字符串模板语法`${变量}` ${简单运算} <script>// +号连接字符function test2(){var a=10var ...
javascript模板字符串（标签函数）
前面介绍了javascript的模板字符串的基本知识,今天深入学习一下标签函数模板字符串概述这里先简单说一下模板字符串的概念 1.模板字符串,从名字上可以得出其实返回的是字符串,普通使用其实就想引 ...
JavaScript模板字符串
JS模板字符串 1. 什么是模板字符串 ? 2. 模板字符串的用法 3. 模板字符串标签函数 1. 什么是模板字符串 ? 模板字符串:是允许嵌入表达式的字符串(可以使用多行字符串和字符串插值功能) 它 ...
JavaScript模板字符串无用
JS模板字符串直接输出今天测试的时候发现以下问题: let value1 = 'test'; console.log('${value1}'); //${value1} 出现原因及解决方法:字符串使 ...
手撕前端面试题【javascript~模板字符串、类继承、参数解析器、生成页码等】
前端的那些基本标签
es6字符串添加html标签,JavaScript_详解JavaScript ES6中的模板字符串，在 ES6 中引入了一种新的字符 - phpStudy...
详解JavaScript ES6中的模板字符串在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是 ...
js模板字符串自定义类名_详解JavaScript ES6中的模板字符串
这篇文章主要介绍了详解JavaScript ES6中的模板字符串,JS的ES6版本带来诸多简洁化方面的重大改进,需要的朋友可以参考下在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用 ...
JavaScript之模板字符串的使用
本文主要介绍JavaScript中模板字符串的使用.相对于字符串拼接而言,模板字符串提供了更加简洁的方法.下面介绍模板字符的几个特性. 1.支持单双引号同时书写模板字符串由反引号"`&qu ...
JavaScript 模板文字（模板字符串）
文章目录字符串的模板文字使用模板文字的多行字符串表达式插值标记模板参考文档在本教程中,您将借助示例了解 JavaScript 模板文字(模板字符串). 模板文字(模板字符串 ...

【javascript】模板字符串

目录

模板字符串

示例1：单行、多行字符串

示例2：嵌入表达式

示例3：模板嵌套

示例4：eval + 模板字符串

示例5：模板字符串获取参数值

示例6：模板字符串获取表单元素的值

参考

【javascript】模板字符串相关推荐

最新文章

热门文章