JavaScript模板字符串

JavaScript模板字符串JavaScript 模板字符串字符串插值模板字符串标签函数


1. 什么是模板字符串 ?

模板字符串:是允许嵌入表达式的字符串(可以使用多行字符串和字符串插值功能)

它的写法,以反引号 ` 开头,以反引号 ` 结尾

let str = `这是一个模板字符串`; 

2. 模板字符串的用法

它与一般字符串不同,会保留空格,换行符和缩进

const str = `第一 行 第二行 第三行` console.log(str); 

在这里插入图片描述

  • 它还可以进行字符串插值,即将其它值插入到字符串中
let name = 'XiXiHaHa', age = 18; let sayHello = `Hello! My name is ${ 
       name}. My age is ${ 
       age}.` console.log(sayHello); 

在这里插入图片描述


3. 模板字符串标签函数

例如:

let a = 1, b = 2; //strings:字符串数组---以${}分分隔符分割得到的数组 //aVal:模板字符串中第一个${}的值 //bVal:模板字符串中第二个${}的值 //abSum:模板字符串中第三个${}的值 function addSum(strings, aVal, bVal, abSum) { 
       console.log(strings); console.log(aVal); console.log(bVal); console.log(abSum); } let abSum = addSum`${ 
        a} + ${ 
        b} = ${ 
        a + b}`; 

在这里插入图片描述

让我们通过一个例子来理解一下它的应用:

let a = 1, b = 2, c = 3; // 由于参数不确定,可以使用剩余参数在这里 function addSum(strings, ...val) { 
       return strings[0] + val.map((e, i) => `${ 
        e}${ 
        strings[i + 1]}`) .join(''); } let abSum = addSum`${ 
        a} + ${ 
        b} = ${ 
        a + b}`; console.log(abSum); let abcSum = addSum`${ 
        a} + ${ 
        b} + ${ 
        c} = ${ 
        a + b + c}`; console.log(abcSum); 

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/231871.html原文链接:https://javaforall.net

(0)
上一篇 2025年11月16日 上午10:01
下一篇 2025年11月16日 上午10:22


相关推荐

  • linxu navicat15 激活码[最新免费获取]

    (linxu navicat15 激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月27日
    48
  • UE4(虚幻4)基础:光照需要重建

    UE4(虚幻4)基础:光照需要重建可能大家使用 UE4 的时候都会在左上角看到这样的标识是因为你的场景中有光源 并且这些光源没有被构建 这时的光照产生的阴影或者其他都是预设 预览的 并没有真正出现在你的场景中方法一 你需要点击构建 或者点击构建那个三角下的仅构建光照方法二 使这些光源变成可移动 实时更新 不需要构建在右侧搜索 light 你可以查看到你场景中的所有光照 点击任意一个 在变换中将其置为可移动

    2026年3月17日
    2
  • 宝塔面板一键部署OpenClaw:AI浏览器自动化助手完整教程

    宝塔面板一键部署OpenClaw:AI浏览器自动化助手完整教程

    2026年3月15日
    4
  • oracle 11g安装时未能满足某些最低安装要求

    oracle 11g安装时未能满足某些最低安装要求本文是转载文章,文章的来源:csdn博客博主:huazicomeon文章:oracle11g安装时未能满足某些最低安装要求博文地址:https://blog.csdn.net/huazicomeon/article/details/53337849失败描述:Oracle安装包在"先决条件检查"步骤报告"未能满足某些最低安装要求。请复查并修复下表中列出的问题,然后重新检查系统。"并在安装界面下方…

    2022年7月25日
    18
  • DML语句(delete,insert,update)

    DML语句(delete,insert,update)DML DataManipula 数据操作语言 insert 将记录插入到数据库 update 修改数据库的记录 delete 删除数据库的记录 commit 提交数据 savepoint 设置回滚点 rollback 回滚执行 DML 命令如果没有提交 将不会被其他会话看到 除非在 DML 命令之后执行了 DDL 命令或 DCL 命令 或用户退出会话 或终止实例 此时系统会自动发出 commit 命令 使未交的 DML 命令提 DQL select 查询语句 DML 数据操作语言 DDL 数据定义语言 DCL

    2026年3月26日
    3
  • Agent引爆大模型商业化,腾讯云官宣涨价!互联网龙头逆市活跃,阿里巴巴上探2%

    Agent引爆大模型商业化,腾讯云官宣涨价!互联网龙头逆市活跃,阿里巴巴上探2%

    2026年3月14日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号