Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
JavaScript的标签模板字面量有哪些高级用法?_创想鸟

JavaScript的标签模板字面量有哪些高级用法?

标签模板字面量通过函数控制字符串解析,可实现动态内容分离、国际化、SQL安全构造及DSL设计,提升代码表达力与安全性。

javascript的标签模板字面量有哪些高级用法?

JavaScript的标签模板字面量(Tagged Template Literals)不仅仅是字符串拼接的语法糖,它能实现更复杂的逻辑处理。通过在模板字符串前添加一个函数作为“标签”,你可以完全控制字符串的解析和返回结果。

1. 解析动态内容与参数分离

标签函数接收两个核心部分:一个是字符串片段数组,另一个是替换表达式的值。这让你可以区分静态文本和动态数据。

例如:

function highlight(strings, …values) {
  let result = ”;
  strings.forEach((str, i) => {
    result += str;
    if (i       result += `${values[i]}`;
    }
  });
  return result;
}

const name = “张三”;
const score = 95;
highlight你好,${name},你的得分为:${score};
// 返回: ‘你好,张三,你的得分为:95‘

这种模式适合生成带格式的HTML或日志输出。

立即学习“Java免费学习笔记(深入)”;

2. 实现国际化(i18n)支持

利用标签函数结合语言包,可实现基于上下文的翻译处理。

比如:

const translations = {
  en: { hello: “Hello”, you_have: “You have” },
  zh: { hello: “你好”, you_have: “你有” }
};

function i18n(locale) {
  return function (strings, …values) {
    const dict = translations[locale];
    let output = strings[0];
    for (let i = 0; i       const key = values[i];
      output += dict[key] || key;
      output += strings[i + 1];
    }
    return output;
  };
}

i18n(‘zh’)欢迎 ${'hello'},${'you_have'} 3 条消息;
// 输出: 欢迎 你好,你有 3 条消息

这种方式让多语言文本更结构化,避免手动拼接。

3. 构建安全的SQL或命令语句

标签模板可用于防止注入攻击,将参数与语句结构分离。

示例中构建一个简单的SQL构造器:

function sql(strings, …values) {
  let query = ”;
  strings.forEach((str, i) => {
    query += str;
    if (i       const escaped = String(values[i])
        .replace(/’/g, “””); // 简单转义
      query += `’${escaped}’`;
    }
  });
  return query;
}

const user = “李四’; DROP TABLE users; –“;
sqlSELECT * FROM logs WHERE user = ${user};
// 结果: SELECT * FROM logs WHERE user = ‘李四”; DROP TABLE users; –‘

虽然不是完整ORM,但展示了如何用标签隔离数据与结构。

4. 嵌套模板与DSL设计

你可以创建领域特定语言(DSL),比如用于样式或查询构建。

如CSS-in-JS场景:

function css(strings, …expressions) {
  const styleText = strings.map((str, i) =>
    str + (expressions[i] ?? ”)
  ).join(”);
  const style = document.createElement(‘style’);
  style.textContent = styleText;
  document.head.appendChild(style);
  return styleText;
}

const color = ‘blue’;
css
  .btn {
    background: ${color};
  }
;

这类用法常见于 styled-components 等库的底层机制。

基本上就这些。标签模板的强大在于它把字符串构造变成了可编程的过程,不只是拼接,而是能分析、转换、验证甚至执行逻辑。掌握它,能让代码更具表达力和安全性。不复杂但容易忽略。

以上就是JavaScript的标签模板字面量有哪些高级用法?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1522890.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
Vue.js中Fetch API数据绑定不生效?理解this上下文是关键
上一篇 2025年12月20日 15:26:27
如何编写可复用的JavaScript自定义表单验证逻辑?
下一篇 2025年12月20日 15:26:43

相关推荐

  • sublime怎么解决许可证密钥(license key)无效问题 _sublime许可证密钥无效修复方法

    sublime怎么解决许可证密钥(license key)无效问题 _sublime许可证密钥无效修复方法sublime怎么解决许可证密钥(license key)无效问题 _sublime许可证密钥无效修复方法sublime怎么解决许可证密钥(license key)无效问题 _sublime许可证密钥无效修复方法sublime怎么解决许可证密钥(license key)无效问题 _sublime许可证密钥无效修复方法

    使用官方购买的正版密钥并清除非法残留可解决Sublime Text许可证无效问题,确保正确输入用户名和多行密钥,删除Local目录下的License.sublime_license文件,检查hosts文件是否屏蔽验证域名,重启软件后即可恢复正常。 Sublime Text 出现许可证密钥无效的问题,…

    2026年9月25日 • 用户投稿
    100
  • 淘宝支付方式无法切换怎么办 支付设置修改与修复方法

    淘宝支付方式无法切换怎么办 支付设置修改与修复方法淘宝支付方式无法切换怎么办 支付设置修改与修复方法淘宝支付方式无法切换怎么办 支付设置修改与修复方法淘宝支付方式无法切换怎么办 支付设置修改与修复方法

    首先检查默认支付设置并更换支付渠道,确认各支付方式状态正常,清除淘宝缓存或重启应用,更新淘宝与支付宝至最新版本,切换网络环境或尝试网页端操作,若仍无法解决则联系客服处理。 淘宝支付方式无法切换,可能是由于账户设置、网络问题或系统缓存导致。别着急,大多数情况下通过简单的设置调整就能解决。以下是几种常见…

    2026年9月25日 • 用户投稿
    000
  • 获取物品名称并转换为字符串时出现乱码的解决方案

    获取物品名称并转换为字符串时出现乱码的解决方案获取物品名称并转换为字符串时出现乱码的解决方案获取物品名称并转换为字符串时出现乱码的解决方案获取物品名称并转换为字符串时出现乱码的解决方案

    本文旨在解决在 Minecraft Spigot 插件开发中,获取玩家放置的物品名称并尝试将其转换为字符串时出现乱码的问题。通过分析问题原因,并提供正确的代码示例,帮助开发者避免类似错误,从而更有效地获取玩家名称。 在 Spigot 插件开发中,当玩家放置方块时,我们可能需要获取该方块对应的玩家名称…

    2026年9月25日 • 用户投稿
    100
  • Bukkit插件开发:正确处理物品显示名称与玩家识别

    Bukkit插件开发:正确处理物品显示名称与玩家识别Bukkit插件开发:正确处理物品显示名称与玩家识别Bukkit插件开发:正确处理物品显示名称与玩家识别Bukkit插件开发:正确处理物品显示名称与玩家识别

    本文旨在解决Bukkit插件开发中,从BlockPlaceEvent获取物品显示名称并将其用于玩家识别时常见的“乱码”问题。我们将深入探讨Component对象与纯文本字符串的区别,并提供两种核心解决方案:直接获取放置方块的玩家名称,以及如何正确地将Component转换为纯文本字符串,以避免不必要…

    2026年9月25日 • 用户投稿
    300
  • 云上书阁app如何绑定手机号_云上书阁app提升账户安全性操作

    云上书阁app如何绑定手机号_云上书阁app提升账户安全性操作云上书阁app如何绑定手机号_云上书阁app提升账户安全性操作云上书阁app如何绑定手机号_云上书阁app提升账户安全性操作云上书阁app如何绑定手机号_云上书阁app提升账户安全性操作

    绑定手机号可提升云上书阁App账户安全性,支持通过“我的”页面或设置菜单操作:进入账号与安全选项,输入手机号并验证短信验证码即可完成绑定。 如果您希望为云上书阁App的账户增加一层保护,绑定手机号是一项关键的安全措施。完成绑定后,您将能更方便地找回密码、接收安全提醒,并提升账户的整体安全性。 本文运…

    2026年9月25日 • 用户投稿
    000
  • sublime怎么折叠所有代码_sublime代码折叠快捷方法

    sublime怎么折叠所有代码_sublime代码折叠快捷方法sublime怎么折叠所有代码_sublime代码折叠快捷方法sublime怎么折叠所有代码_sublime代码折叠快捷方法sublime怎么折叠所有代码_sublime代码折叠快捷方法

    Sublime Text 支持多种代码折叠快捷键,Windows/Linux 使用 Ctrl + Shift + [/] 折叠/展开代码块,Ctrl + K, Ctrl + 1 展开所有用 Ctrl + K, Ctrl + J,macOS 用户将 Ctrl 替换为 Command。 在 Sublim…

    2026年9月25日 • 用户投稿
    200
  • sublime怎么实现sass/scss的自动编译_sublime配置SASS自动编译方法

    sublime怎么实现sass/scss的自动编译_sublime配置SASS自动编译方法sublime怎么实现sass/scss的自动编译_sublime配置SASS自动编译方法sublime怎么实现sass/scss的自动编译_sublime配置SASS自动编译方法sublime怎么实现sass/scss的自动编译_sublime配置SASS自动编译方法

    安装LiveSassCompiler插件并配置路径后,保存SCSS文件可自动编译为CSS。1. 通过Package Control安装插件;2. 设置输入输出路径;3. 保存文件触发编译,提升开发效率。 Sublime Text 要实现 SASS/SCSS 的自动编译,可以通过安装插件并配置构建系统…

    2026年9月25日 • 用户投稿
    200
  • 解析音调调整指令:一个Java教程

    解析音调调整指令:一个Java教程解析音调调整指令:一个Java教程解析音调调整指令:一个Java教程解析音调调整指令:一个Java教程

    本文旨在提供一个清晰易懂的Java教程,用于解析包含音调调整指令的字符串。通过使用正则表达式,我们可以从复杂的输入字符串中提取乐器名称、调整方向和调整量。本教程将详细解释代码实现,并提供示例,帮助读者理解如何在Java中处理这类问题。 使用正则表达式解析音调调整指令 在音乐领域,音调的微调至关重要。…

    2026年9月25日 • 用户投稿
    100
  • 货拉拉司机版怎样设置自动抢单参数_货拉拉司机版自动抢单的配置优化方法

    货拉拉司机版怎样设置自动抢单参数_货拉拉司机版自动抢单的配置优化方法货拉拉司机版怎样设置自动抢单参数_货拉拉司机版自动抢单的配置优化方法货拉拉司机版怎样设置自动抢单参数_货拉拉司机版自动抢单的配置优化方法货拉拉司机版怎样设置自动抢单参数_货拉拉司机版自动抢单的配置优化方法

    开启自动抢单并设置合理接单范围、筛选目标订单类型、匹配出车时间段及启用顺路单优先功能,可显著提升货拉拉司机接单效率。 如果您希望在货拉拉司机版中提升接单效率,合理配置自动抢单参数是关键。系统默认设置可能无法满足高峰时段或特定区域的接单需求,因此需要根据实际运营情况调整相关选项。以下是优化自动抢单配置…

    2026年9月25日 • 用户投稿
    000
  • Java字符串高级解析:使用正则表达式处理复杂指令模式

    Java字符串高级解析:使用正则表达式处理复杂指令模式Java字符串高级解析:使用正则表达式处理复杂指令模式Java字符串高级解析:使用正则表达式处理复杂指令模式Java字符串高级解析:使用正则表达式处理复杂指令模式

    本教程演示如何使用Java的java.util.regex包,通过正则表达式高效解析包含多条调音指令的复杂字符串。我们将学习构建匹配特定模式的正则表达式,并利用Pattern和Matcher类从输入字符串中准确提取乐器名称、调音方向和数值,从而将原始指令转换为清晰可读的输出格式。 1. 问题背景与挑…

    2026年9月25日 • 用户投稿
    100
  • sublime如何同步多台电脑的配置和插件 _sublime多设备配置同步方法

    sublime如何同步多台电脑的配置和插件 _sublime多设备配置同步方法sublime如何同步多台电脑的配置和插件 _sublime多设备配置同步方法sublime如何同步多台电脑的配置和插件 _sublime多设备配置同步方法sublime如何同步多台电脑的配置和插件 _sublime多设备配置同步方法

    通过管理Sublime Text配置目录并结合云盘或Git实现多设备同步。将Packages目录移至云盘并创建符号链接,或用Git版本化关键配置文件,配合Package Control自动恢复插件,确保各设备设置一致。 Sublime Text 是许多开发者喜爱的轻量级编辑器,跨设备使用时保持配置和…

    2026年9月25日 • 用户投稿
    100
  • sublime如何卸载插件 _sublime插件卸载教程

    sublime如何卸载插件 _sublime插件卸载教程sublime如何卸载插件 _sublime插件卸载教程sublime如何卸载插件 _sublime插件卸载教程sublime如何卸载插件 _sublime插件卸载教程

    通过Package Control卸载:打开Sublime Text,调出命令面板,输入Remove Package,选择插件并删除;2. 手动删除:关闭软件后进入Packages目录,删除对应插件文件夹;3. 注意清理User目录下的残留配置文件,避免冗余。操作安全,不影响主程序。 在 Subli…

    2026年9月25日 • 用户投稿
    100
  • Java中整数类型溢出行为详解:二进制补码与循环特性

    Java中整数类型溢出行为详解:二进制补码与循环特性Java中整数类型溢出行为详解:二进制补码与循环特性Java中整数类型溢出行为详解:二进制补码与循环特性Java中整数类型溢出行为详解:二进制补码与循环特性

    Java中原始整数类型在处理超出其范围的数值时,会遵循一种基于二进制补码的循环溢出机制。这意味着当正数溢出时会“回卷”为负数,反之亦然,如同数字在一个有限的圆环上循环。理解这一特性对于准确预测类型转换和算术运算结果至关重要。 计算机中的数值表示:位、字节与二进制 在计算机底层,所有数据都以二进制形式…

    2026年9月25日 • 用户投稿
    100
  • Java数据类型溢出:原理、预测与避免

    Java数据类型溢出:原理、预测与避免Java数据类型溢出:原理、预测与避免Java数据类型溢出:原理、预测与避免Java数据类型溢出:原理、预测与避免

    本文旨在深入解析Java中数据类型溢出的现象,阐述其背后的二进制补码原理,并提供预测溢出结果的方法。通过理解数据在计算机中的存储方式,以及溢出时数值的循环特性,开发者可以更好地掌握Java中的数据类型,避免潜在的错误。 数据在计算机中的存储:二进制补码 计算机底层使用二进制(bits)来表示所有数据…

    2026年9月25日 • 用户投稿
    100
  • MBTI测试免费入口网址_ MBTI官网免费测试网站链接

    MBTI测试免费入口网址_ MBTI官网免费测试网站链接MBTI测试免费入口网址_ MBTI官网免费测试网站链接MBTI测试免费入口网址_ MBTI官网免费测试网站链接MBTI测试免费入口网址_ MBTI官网免费测试网站链接

    MBTI测试免费入口网址是https://www.16personalities.com/,该网站提供无需注册即可参与的近百道题人格测试,耗时约10至15分钟,支持中文界面并可导出PDF报告。 MBTI测试免费入口网址在哪里?这是不少朋友都在寻找的,接下来由PHP小编为大家带来MBTI官网免费测试网…

    2026年9月25日 • 用户投稿
    300
  • sublime怎么运行php文件 _sublime PHP文件运行方法

    sublime怎么运行php文件 _sublime PHP文件运行方法sublime怎么运行php文件 _sublime PHP文件运行方法sublime怎么运行php文件 _sublime PHP文件运行方法sublime怎么运行php文件 _sublime PHP文件运行方法

    首先确保PHP已安装并加入环境变量,然后在Sublime Text中创建PHP构建系统:通过Tools → Build System → New Build System…添加对应操作系统的JSON配置,保存为PHP.sublime-build至User目录;接着打开.php文件按Ctrl+ B或C…

    2026年9月25日 • 用户投稿
    000
  • Java中数据类型溢出的原理及预测方法

    Java中数据类型溢出的原理及预测方法Java中数据类型溢出的原理及预测方法Java中数据类型溢出的原理及预测方法Java中数据类型溢出的原理及预测方法

    本文旨在阐明Java中当数值超出所选数据类型范围时发生的溢出现象,并提供预测溢出结果的方法。文章将深入探讨计算机中数值的存储方式,特别是补码表示法,以及溢出时数值如何“环绕”的原理。通过理解这些概念,读者可以准确预测Java中数据类型溢出的结果。 理解计算机中的数值表示:补码 在计算机中,所有数据最…

    2026年9月25日 • 用户投稿
    200
  • 使用 DynamoDBMapper 进行条件更新操作

    使用 DynamoDBMapper 进行条件更新操作使用 DynamoDBMapper 进行条件更新操作使用 DynamoDBMapper 进行条件更新操作使用 DynamoDBMapper 进行条件更新操作

    本文将介绍如何利用 DynamoDBMapper 在 Java 中执行基于当前值的条件更新操作,特别是使用 “ADD” 操作来递减账户余额。虽然 DynamoDBMapper 默认不支持直接使用更新表达式,但通过配置 SaveBehavior,可以实现类似的效果。 Dynam…

    2026年9月25日 • 用户投稿
    100
  • 大智慧app怎么清空缓存数据_大智慧app缓存数据清理步骤

    大智慧app怎么清空缓存数据_大智慧app缓存数据清理步骤大智慧app怎么清空缓存数据_大智慧app缓存数据清理步骤大智慧app怎么清空缓存数据_大智慧app缓存数据清理步骤大智慧app怎么清空缓存数据_大智慧app缓存数据清理步骤

    清理大智慧App缓存可提升运行效率,释放存储空间。首先可通过“我的”→“设置”→“缓存清理”清除临时文件;如需彻底清理,可进入“数据清除”选择“全部清除”,但会删除账户设置与交易记录;若仅需清除特定数据,可选“清除委托交易账户信息”进行精准操作。 如果您在使用大智慧App时遇到运行卡顿、加载缓慢或存…

    2026年9月25日 • 用户投稿
    000
  • 解决JavaFX应用导出为可运行JAR后FXMLLoader资源加载失败的问题

    解决JavaFX应用导出为可运行JAR后FXMLLoader资源加载失败的问题解决JavaFX应用导出为可运行JAR后FXMLLoader资源加载失败的问题解决JavaFX应用导出为可运行JAR后FXMLLoader资源加载失败的问题解决JavaFX应用导出为可运行JAR后FXMLLoader资源加载失败的问题

    本文旨在解决JavaFX应用在Eclipse中正常运行,但导出为可运行JAR包后,因FXMLLoader无法找到FXML资源文件而抛出IllegalStateException: Location is not set异常的问题。核心解决方案是调整FXMLLoader.setLocation()方法…

    2026年9月25日 • 用户投稿
    200

发表回复

登录后才能评论
关注微信