javascript模板字符串(标签函数)
前面介绍了javascript的模板字符串的基本知识,今天深入学习一下标签函数
模板字符串概述
这里先简单说一下模板字符串的概念
1、模板字符串,从名字上可以得出其实返回的是字符串,普通使用其实就想引号一样的使用,只是加了一些功能
注:先这些实验例子都是自浏览器控制台中测试的。
当做引号使用,返回字符串
`aaaaa`//返回字符串"aaaaa"
插入表达式,其实有点格式化输出的感觉
var a=123;`aaa${a}aaa`//返回字符串"aaa123aaa"
带标签的模板字符串,可以自定义函数处理模板字符串
var person = 'Mike';var age = 28;function myTag(strings, personExp, ageExp) { var str0 = strings[0]; // "that " var str1 = strings[1]; // " is a " // There is technically a string after // the final expression (in our example), // but it is empty (""), so disregard. // var str2 = strings[2]; var ageStr; if (ageExp > 99){ ageStr = 'centenarian'; } else { ageStr = 'youngster'; } return str0 + personExp + str1 + ageStr;}var output = myTag`that ${ person } is a ${ age }`;console.log(output);//输出字符串that Mike is a youngster
这里需要注意的一点是,使用标签函数时,模板字符串会解析成字符串数组跟各个${}的值,然后传入标签函数中,因为标签函数的入参就是这样的,下面会深入将标签函数的。
标签函数定义
标签使您可以用函数解析模板字符串。
标签函数的第一个参数包含一个字符串值的数组。其余的参数与表达式相关。最后,你的函数可以返回处理好的的字符串(或者它可以返回完全不同的东西,全看标签函数的处理)。用于该标签的函数的名称可以被命名为任何名字。
下面看一下标签函数的组成
function Tag(strings, personExp,ageExp,...)//strings:字符串数组,这个其实就是以${}分分隔符分割得到的数组//personExp:模板字符串中第一个${}的值//ageExp:模板字符串中第二个${}的值//...:模板字符串中第n个${}的值
我们可以看个例子,console.log可以打印出来
console.log `aaa${1}bbb`//['aaa','bbb'] 1console.log `aaa${1}b${2}bb`//['aaa','b','bb'] 1 2
可以很好的看到,使用标签函数时,模板字符串会被分解成各部分,然后传入标签函数中进行处理。
而标签函数怎么处理完全看函数内部是怎么实现的了,上面例子中实现的myTag标签函数就是拼接字符串然后返回,就相当于字符串拼接的功能。
拓展问题--内置函数作标签函数使用
从上面学习,标签函数是可以自己实现的,除了内置的标签函数,用内置函数是不是也可以作标签函数呢
我们用alert函数试一下
alert`aa${1}bbb`//返回字符串"aa,bbb"//实际模板字符串分解后的数据是['aa','bbb'] 1
为什么呢,猜想原因有两个
1、alert内置函数的入参可能只有一个,所以只传入了数组
2、alert内置函数的内部处理逻辑是把数组内容拼接,以,分割
验证第一个猜想
使用另一个函数,上面例子也是用过的console.log,
console.log(obj1 [, obj2, ..., objN]);
这个函数入参有很多个
console.log `aaa${1}bbb`//['aaa','bbb'] 1console.log `aaa${1}b${2}bb`//['aaa','b','bb'] 1 2
从输出结果来看,这个就把所有参数都传入了
验证第二个猜想
上面console.log的例子也证明了第二个猜想,跟alert不同,console.log没有做处理,而是将输入直接输出,跟alert不一样
结论
1、可自定义标签函数
2、js内置函数也可作为标签函数,但是需要考虑入参数量,及处理逻辑
转载于:https://www.cnblogs.com/alummox/p/11349116.html
javascript模板字符串(标签函数)相关推荐
- JavaScript模板字符串
JS模板字符串 1. 什么是模板字符串 ? 2. 模板字符串的用法 3. 模板字符串标签函数 1. 什么是模板字符串 ? 模板字符串:是允许嵌入表达式的字符串(可以使用多行字符串和字符串插值功能) 它 ...
- JavaScript模板字符串传参数
JavaScript模板字符串传参数 JavaScript模板字符串传参数 JavaScript模板字符串传参数 <!DOCTYPE html> <html lang="e ...
- ES6(二)——字符串模板、标签模板字符串、函数的默认参数、剩余参数、数组对象的展开语法、数值的表示、Symbol
一.字符串模板基本使用 在ES6之前,如果我们想要将字符串和一些动态的变量(标识符)拼接到一起,是非常麻烦和丑陋的(ugly). ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接: 首 ...
- javaScript:js数据类型,模板字符串,函数
一.js数据类型 基本数据类型(值类型):字符串(String).数字(Number).布尔(Boolean).对空(Null).未定义(Undefined). 引用数据类型(对象类型):对象(Obj ...
- javaScript模板字符串、严格模式、编码字节长度
一.模板字符串 var str=`hello`模板字符串 模板语法`${变量}` ${简单运算} <script>// +号连接字符function test2(){var a=10var ...
- JavaScript模板字符串无用
JS模板字符串直接输出 今天测试的时候发现以下问题: let value1 = 'test'; console.log('${value1}'); //${value1} 出现原因及解决方法:字符串使 ...
- vue模板字符串标签动态参数_Vue中的字符串模板的使用
1.HTML模板和字符串模板 HTML模板:直接在HTML页面挂载的模板.(即非字符串模板) 非字符串模板:在单文件里用 指定的模板,换句话说,写在 html 中的就是非字符串模板. 字符串模板:在j ...
- 模板字符串`${}` 各种函数中的this指向?
let name="小明" let age="18" console.log(`${this.name}已经${age}岁了`)//输出:小明已经18岁了 ** ...
- 手撕前端面试题【javascript~模板字符串、类继承、参数解析器、生成页码等】
前端的那些基本标签
最新文章
- 17个Python的“正常“ 操作,你都OK吗?
- VTK:vtkCubeAxesActor用法实战
- Gitlab上传代码
- CPU profiling
- 第十八届浙大城市学院程序设计竞赛(同步赛)签到题ABDFGJL
- java执行查询postgresql得到中文乱码_PostgreSQL 初探
- Initialize flexnet service failed error code 50003错误
- 国开大学c语言程序设计形考任务1,国开电大《数控编程技术》形考任务1-4答案...
- 购买namesilo域名可以用微信支付了
- golang实现最简单的麻将胡牌算法(不包括牌型,有需求后续可以更新牌型计算)
- linux nano vim,修改ubuntu默认Nano编辑器为vim
- win10 企业版 设备管理器找不到 端口(COM和LPT)
- [UESTC878]温泉旅店
- android 8.0 耳机线控,最新资讯 | 安卓8.0这大变化没法忍!要弃耳机孔
- UI小练习,模仿登陆界面
- vue 生成二维码海报并进行微信分享
- 极限钓鱼!FBI开发加密通讯设备并通过线人流入黑市,800多名罪犯被监控并抓捕...
- 弥豆子 重建 二叉树
- 转载:西门子 Step7 V5.5 SP4中文版
- 思科指定根交换机与设置交换机优先级
热门文章
- IT朋友,有福啦! 精心收集的深圳餐馆大全(带电话,地址,部分还有店面图片)
- 期权时间价值的异常现象分析
- 卖「概念」卖到资产上亿?
- 快乐星球计算机老师007,这10大专业是真的累,第一名007是常事儿
- PCB原理图绘制(3)——元器件的基本放置与查找添加
- IAR for STM8 使用固件库
- excel if函数 android,Excel中IF函数的嵌套用法(多条件)
- java 两字符串相同,关于java:使用==比较两个相同的字符串将返回false
- 2020如何维护自动化测试
- 敏捷开发智慧敏捷系列之一:序言