JavaScript 中的 String 类型 模板字面量定义字符串

news2024/9/21 20:23:34

ECMAScript 6新增了使用模板字面量定义字符串的能力。与使用单引号或双引号不同,模板字面量保留换行字符,可以跨行定义字符串:

 let str1 = '早起的年轻人\n喜欢经常跳步';
 let str2 = `早起的年轻人
 喜欢经常跳步`;
 console.log(str1);
 // 早起的年轻人
 // second line"
 console.log(str2);
 // 早起的年轻人
 // 喜欢经常跳步
 console.log(str1 === str2); // true

比定义HTML模板:

  let pageHTML = `
  <div>
    <a href="#">
      <span>早起的年轻人​</span>
    </a>
  </div>`;

模板字符中会保持反引号内部的空格,因此在使用时要格外注意。

    // 这个模板字面量在换行符之后有25 个空格符
    let str1 = `first line
                              second line`;
    console.log(str1.length);   // 47
    // 这个模板字面量以一个换行符开头
    let str2 = `
    first line
    second line`;
    console.log(str2[0] === '\n'); // true

​支持字符串插值,也就是可以在一个连续定义中插入一个或多个值。

上述所描述的模板字面量是一种特殊的JavaScript句法表达式,只不过求值后得到的是字符串。模板字面量在定义时立即求值并转换为字符串实例,任何插入的变量也会从它们最接近的作用域中取值。

字符串插值通过在${}中使用一个JavaScript表达式实现:

let value =10;
let exponent = 'second';
// 以前
let str1 =
  value + ' to the ' + exponent + ' power is ' + (value * value);
// 现在,可以用模板字面量这样实现: 反引号 ​`
let str2 =
  `${ value } to the ${ exponent } power is ${ value * value }`;
console.log(str1);   // 10 to the second power is 100
console.log(str2);   // 10 to the second power is 100

所有插入的值都会使用toString()强制转型为字符串,而且任何JavaScript表达式都可以用于插值。嵌套的模板字符串无须转义:

    console.log(`Hello, ${ `World` }! `);   // Hello, World!

将表达式转换为字符串时会调用toString():

let foo = { toString: () => 'World' };
console.log(`Hello, ${ foo }! `);   

在插值表达式中可以调用函数和方法:

function capitalize(word) {
  return `${ word[0].toUpperCase() }${ word.slice(1) }`;
}
let str1 = `${ capitalize('hello') }, ${ capitalize('world') }! `;​
console.log(str1); // Hello, World!

模板字面量也支持定义标签函数(tag function),而通过标签函数可以自定义插值行为。

let a = 10;
let b = 12;
function simpleTag(str1, str2, str3, str4​) {
  console.log(str1​);
  console.log(str2​);
  console.log(str3​);
  console.log(str4​);
  return '早起的年轻人​';
}
let untaggedResult = `${ a } + ${ b } = ${ a + b }`;
let taggedResult=simpleTag`${a}+${b}=${a+b}`;
​​
console.log(untaggedResult);    // "10 + 12= 22​"
console.log(taggedResult);      // "早起的年轻人​"

在这里插入图片描述
因为表达式参数的数量是可变的,所以通常应该使用剩余操作符​:

let a = 6;
let b = 9;
functionsimpleTag(strings, ...expressions){
  console.log(strings);
  for(const expression of expressions) {
    console.log(expression);
  }
  return '早起的年轻人​';
}
    let taggedResult = simpleTag`${ a } + ${ b } = ${ a + b }`;
console.log(taggedResult);  

在这里插入图片描述
如果你想把这些字符串和对表达式求值的结果拼接起来作为默认返回的字符串,可以这样做:

  let a = 6;
  let b = 9;
  function zipTag(strings, ...expressions) {
    return strings[0] +
            expressions.map((e, i) => `${e}${strings[i + 1]}`)
                      .join('');
  }let st1 =  `${ a } + ${ b } = ${ a + b }`;
  let st2​ = zipTag`${ a } + ${ b } = ${ a + b }`;
  console.log(st1​);   // "6 + 9 = 15"
  ​console.log(st2);     // "6 + 9 = 15"

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/393175.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【游戏逆向】游戏玩家技能冷却分析

技能冷却对于不同的游戏有不同的存放方式,而技能冷却的遍历也大多不会和技能的普通属性放在一起,在《在**明月刀》这款游戏中,技能的冷却判断格外重要,因为技能的连贯性对打怪的效率影响很大。 我们需要找一个冷却相对较长的技能用来进行扫描和过滤,一般选择几十秒即可,…

【本周特惠课程】基于GAN的图像增强理论与实践(涵盖图像降噪、色调映射、去模糊、超分辨、修复等方向)...

前言欢迎大家关注有三AI的视频课程系列&#xff0c;我们的视频课程系列共分为5层境界&#xff0c;内容和学习路线图如下&#xff1a;第1层&#xff1a;掌握学习算法必要的预备知识&#xff0c;包括Python编程&#xff0c;深度学习基础&#xff0c;数据使用&#xff0c;框架使用…

Windows扫描工具RunScanner使用实验(21)

实验目的 掌握利用Runscanner扫描和分析电脑&#xff1b;预备知识 RunScanner是一个完全免费的Windows系统工具,您可以用它轻松地将隐藏在您系统中的autostart程序,spyware,adware,主页劫持,未经认证的驱动揪出来,并可以导入和导出报告以帮助别人或获取帮助.目前它可以…

华为OD机试题,用 Java 解【素数之积】问题

华为Od必看系列 华为OD机试 全流程解析+经验分享,题型分享,防作弊指南)华为od机试,独家整理 已参加机试人员的实战技巧华为od 2023 | 什么是华为od,od 薪资待遇,od机试题清单华为OD机试真题大全,用 Python 解华为机试题 | 机试宝典使用说明 参加华为od机试,一定要注意不…

C++中的利器——模板

前文本文主要是讲解一下C中的利器——模板&#xff0c;相信铁子们在学完这一节后&#xff0c;写代码会更加的得心应手&#xff0c;更加的顺畅。一&#xff0c;泛型编程想要学习模板&#xff0c;我们要先了解为什么需要模板&#xff0c;我们可以看看下面这个程序。int add(int&a…

MDK Keil5 创建Stm32工程-理论篇(这里以Stm32F103Zet6为例)

一、文件夹创建与文件说明整个工程可以粗略的划分为几个文件夹&#xff1a;BSP底层驱动比如GPIO\Timer等驱动文件CMSIS内核相关的文件Firmware生成的固件下载文件Mycode用户编写的相关文件&#xff0c;主要编写的文件都在这个文件夹里Project工程文件startup芯片启动文件STM32F…

1.C#与.NET简介

目录 一、C#语言及其特点 二、C#与.NET Framework/.NET Core关系 三、C#应用开发 四、案例展示 五、学习环境 一、C#语言及其特点 C#是美国微软公司发布的一种面向对象的&#xff0c;运行于 .NET Framework 和 .NET Core &#xff08;完全开源&#xff0c;跨平台&#xff…

什么是LSM-Tree

前言 十多年前&#xff0c;谷歌发布了大名鼎鼎的"三驾马车"的论文&#xff0c;分别是GFS(2003年)&#xff0c;MapReduce&#xff08;2004年&#xff09;&#xff0c;BigTable&#xff08;2006年&#xff09;&#xff0c;为开源界在大数据领域带来了无数的灵感&#…

unity的安装配置和第一个游戏-unity开学第一课

许多的小伙伴学编程语言其实是因为玩游戏&#xff0c;玩着玩着就想写游戏了&#xff0c;于是开始学习c学习C#学习java&#xff0c;但相比之下C#的操作会更加容易&#xff0c;所以就开始学习unity来编游戏了。这里就就算是unity开学第一课啦-unity的安装配置和第一个游戏。 文章…

Maven项目的创建

目录 1.创建java项目 1.1 新建项目​编辑 2 创建web项目 2.1 新建项目 2.2 启动项目 2.2.1 修改jdk的版本 2.2.2 设置单元测试的版本 2.2.3 删除pluginManagement标签 2.2.4添加web部署插件 2.2.5 启动项目 1.创建java项目 1.1 新建项目 创建resources目录 利用maven…

类模板函数模板从属类型

准备看个项目找实习&#xff0c;边看边学&#xff0c;一看到处都是template 和typename&#xff0c;好几年前学的C都忘记光了&#xff0c;在这里先做个笔记复习一下。template <class T> T abs(T x) {if(x < 0) return -x;return x; } int main() {int x 1;cout <…

PyQt5可视化 7 饼图和柱状图实操案例 ①Qt项目的创建

目录 一、新建Qt项目 二、添加组件和布局 三、添加资源 1. 新建资源文件 2. 添加图标资源 四、frameHead 1. toolBtnGenData 2. toolBtnCounting 3. comboTheme 4. comboAnimation 5. Horizontal Spacer 6. toolBtnQuit 7. 设置toolBtnQuit的功能 8. frameHead的…

设计模式(十六)----结构型模式之代理享元模式

1、概述 定义&#xff1a; 运用共享技术来有效地支持大量细粒度对象的复用。它通过共享已经存在的对象来大幅度减少需要创建的对象数量、避免大量相似对象的开销&#xff0c;从而提高系统资源的利用率。 2 结构 享元&#xff08;Flyweight &#xff09;模式中存在以下两种状…

CentOS系统安装部署Zabbix

1、LNMP环境部署&#xff1a; 1&#xff09;系统升级&#xff1a; yum update -y 2&#xff09;安装依赖库&#xff1a; yum install -y zlib pcre pcre-devel openssl openssl-devel 3&#xff09;添加用户www&#xff0c;那么也自动创建了用户组&#xff1a;www&#xf…

C/C++开发,无可避免的多线程(篇五).实现自己的线程封装类

一、c11以前的线程封装版本 在本专栏的多线程课题第一篇就说过&#xff0c;c11标准前&#xff0c;实现多线程事务是由调用的<pthread.h>头文件的线程相关功能函数来实现的。 现在通过<pthread.h>的pthread_create、pthread_join、pthread_exit等功能函数来封装一个…

VRRP主备备份

1、VRRP专业术语 VRRP备份组框架图如图14-1所示: 图14-1:VRRP备份组框架图 VRRP路由器(VRRP Router):运行VRRP协议的设备,它可能属于一个或多个虚拟路由器,如SwitchA和SwitchB。虚拟路由器(Virtual Router):又称VRR…

元宇宙、区块链 通俗易懂

什么是区块链&#xff1f;比特币挖矿是什么&#xff1f;元宇宙是什么&#xff1f;Web(万维网)的三权化进化&#xff1a;基于此&#xff0c;介绍下“元宇宙”。1992年&#xff0c;美国作家史蒂芬森在《雪崩》一书中首次提出了“元宇宙(Metaverse)”的概念。元宇宙实际上就是一种…

新C++(13):布隆过滤器

"明白成功&#xff0c;不一定赢在起跑线!"位图反思上篇呢&#xff0c;我们在遇到海量数据时&#xff0c;如果只是进行诸如&#xff0c;查找一个数在不在这样的简单逻辑情况&#xff0c;在使用数组这样的内存容器&#xff0c;无法存储这么多数据时&#xff0c;我们采用…

计算机网络第八版——第三章课后题答案(超详细)

第三章 该答案为博主在网络上整理&#xff0c;排版不易&#xff0c;希望大家多多点赞支持。后续将会持续更新&#xff08;可以给博主点个关注~ 第一章 答案 第二章 答案 【3-01】数据链路&#xff08;即逻辑链路&#xff09;与链路&#xff08;即物理链路&#xff09;有何区…

Numpy/Pandas常用函数

&#x1f442; 不露声色 - Jam - 单曲 - 网易云音乐 目录 &#x1f33c;前言 &#x1f44a;一&#xff0c;Python列表函数 &#x1f44a;二&#xff0c;Numpy常用函数 1&#xff0c;生成数组 2&#xff0c;描述数组属性 3&#xff0c;常用统计函数 4&#xff0c;矩阵运…