ES6 标记模板实用性

2023-12-23

我了解ES6的语法标记模板 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings#Tagged_template_strings。我没有看到的是实际可用性。什么时候比传递对象参数更好,比如中的设置jQuery 的 AJAX http://api.jquery.com/jquery.ajax/? $.ajax('url', { /*this guy here*/ })

现在我只看到了棘手的语法,但我不明白为什么我需要/使用它。我还发现 TypeScript 团队选择在其他重要功能之前实现它(在 1.5 中)。标记字符串模板背后的概念是什么?


您可以使用标记模板来构建比常规函数调用更具表现力的 API。

例如,我正在研究一个概念验证库 https://github.com/jwhitfieldseed/prequel对于 JS 数组的 SQL 查询:

let admins = sql`SELECT name, id FROM ${users} 
                 WHERE ${user => user.roles.indexOf('admin') >= 0}`

请注意,它与字符串插值无关;它使用标记模板以提高可读性。很难用简单的函数调用来构建直观地读取的东西 - 我猜你会有这样的东西:

let admins = sql("SELECT name, id FROM $users WHERE $filter",
  { $users: users, $filter: (user) => user.roles.contains('admin') })

这个例子只是一个有趣的副项目,但我认为它展示了标记模板的一些好处。

另一个例子,也许更明显,是 i18n - 标记模板可以插入输入的区域设置敏感版本。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ES6 标记模板实用性 的相关文章

  • 节点遗留 url.parse 已弃用,用什么代替?

    require url parse someurl com page 已被仅弃用 并且我们严格的 linter 对此不满意 我尝试用互联网建议的内容替换我们的代码中的它new URL someurl com page 在大多数情况下都有效
  • Mozilla WebExtension API 存储 - 使用和不使用断点进行调试会导致不同的输出

    大家好 我正在尝试为 Mozilla Firefox 浏览器实现一个附加组件 以下脚本显示了我已经成功集成的一个后台脚本 它使用 Mozilla WebExtension API 存储 它被执行了 但浏览器控制台上的日志让我感到惊讶 我交替
  • Typescript:匿名函数内可能未定义的变量

    太长了 在匿名函数中使用变量之前检查变量仍然 TS 警告变量可能未定义 在下面的代码示例中变量baseDirId检查是否未定义 然后传递给 array map 函数 但 TS 发出警告baseDirId可以是未定义的 Typescript
  • Pug 从模板内的另一个文件调用 js 函数

    我花了将近四个小时都无法解决这个问题 而且我找不到任何针对此类问题的有用文档 这就是问题 我正在使用 pug jade 模板 我想调用 pug 模板内的函数来转换一些数据 这是主要模板 main template section each
  • 为什么 Promise `.then` 方法的回调是反模式

    我在 StackOverflow 上看到了答案 人们建议为 AngularJS 服务提供回调函数 app controller tokenCtrl function scope tokenService tokenService getTo
  • React Native 无法访问 Cloud Firestore 后端

    我之前使用的是 firebase 实时数据库 但现在想切换到 Cloud Firestore 但即使经过身份验证 也会收到以下错误 我目前正在使用 Android Simulator 尝试禁用我的实时数据库 但找不到解决方案 Firebas
  • 从 puppeteer PDF 中删除分页符?

    我目前正在尝试查看是否有一种方法可以删除我的 puppeteer PDF 中的分页符 因为我当前的 PDF 设置中的一些分页符正在以一种奇怪的方式切断文本 我正在谈论的内容的屏幕截图 我的傀儡代码 app get companyId pdf
  • 为什么Promise中的代码会同步执行? [复制]

    这个问题在这里已经有答案了 在我的项目中 我有一个很长时间运行的操作 所以我决定将其放入Promise因为我认为这样我就可以在里面的代码继续执行其他操作Promise正在跑步 调试的时候发现外面的代码Promise仅当里面的代码执行Prom
  • 为某个时刻添加持续时间 (moment.js)

    时刻版本 2 0 0 阅读文档后 http momentjs com docs manipulating add 我认为这很简单 Chrome 控制台 var timestring1 2013 05 09T00 00 00Z var tim
  • 如何使用 github 托管外部 CSS 文件?

    我将 css 上传到 github 然后转到网站上的文件并单击 raw 选项 我尝试将其添加到网页中 但 chrome 给出以下错误 资源解释为样式表 但使用 MIME 类型 text plain 进行传输 https raw github
  • 将默认搜索文本添加到搜索框 html

    我正在努力将 搜索 文本添加到搜索框 我正在努力实现 onfocus 消失文本 And onblur 重新出现文本 到目前为止 我已经实现了这一点 但我必须将其硬编码为 html eg
  • 当rest api应用程序服务器(express)和Angulars js应用程序在不同端口上运行时出现Cors问题

    我有用node js编写的rest api应用程序 express在端口3000上运行 而angularjs应用程序在同一服务器上的端口9001上运行 从 angularjs 应用程序调用 rst api 时 出现了 cors 问题 在re
  • chrome 选项卡/窗口中的 window.open 行为

    我有一小段 javascript 旨在打开两个或更多选项卡 这在 FF 和 IE 中工作正常 但 chrome 会在新窗口而不是选项卡中打开第二个窗口 它不依赖于 url 因为我已经尝试过使用两个相同的 url 第一个在选项卡中打开 第二个
  • JavaScript setTimeout 和更改系统时间会导致问题

    我注意到如果我设置setTimeout未来1分钟 然后将我的系统时间更改为过去5分钟 setTimeout功能将在 6 分钟后触发 我这样做是因为我想看看夏令时系统时钟更改期间会发生什么 我的 JavaScript 网页使用setTimeo
  • WebpackError:ReferenceError:Gatsby 上未定义窗口

    我已经在互联网上进行了大量搜索 但无法解决这个问题 我正在使用 Gasby 开发静态页面 但遇到此错误 WebpackError ReferenceError window is not defined 我的线索是 这与我正在使用的引导 模
  • D3 强制布局,较大的节点聚集在中心

    我一直在修改将用于标签云的强制布局 每个标签都由一个
  • 如何计算一行中Flexbox项目的数量?

    网格是使用 CSS flexbox 实现的 Example http jsbin com jumosicasi edit html css js output 本示例中的行数为 4 因为我出于演示目的固定了容器宽度 但是 实际上 它可以根据
  • eventSources 到事件 Json,完整日历

    我正在尝试从 eventSources 获取 json 调用到我的事件 我在 eventSources 中返回的 json 是 title Title Test start 1305841052 当我将此字符串传递到事件中时 它会正确显示日
  • YouTube 点击时禁用 HTML5

    有没有办法让我们通过javascript禁用HTML5视频的 播放 暂停 点击全屏 功能 然后在我们再次需要时将其放回去 我不知道你是否可以禁用它们 但你可以使用 css 删除它们 video webkit media controls f
  • 如何强制下载图片?

    我的页面上有一个动态生成的图像 如下所示 img src 我不想告诉我的用户右键单击图像并点击保存 而是想公开一个下载链接 单击该链接将提示下载图像 如何实现这一目标 最初我在 js 中尝试这样做 var path my image att

随机推荐

  • 将文件保存到 Azure Blob 中

    我正在使用下面的 python 代码将文件保存到本地文件夹中 我想将此文件直接保存到 Azure Blob 中 我不希望文件存储在本地然后上传到 blob 我尝试在文件夹变量中给出 blob 位置 但它不起作用 我有一个 excel 文件
  • 如何使用 Webpack 设置 React 组件的私有共享库

    我在多个 Webpack 项目中使用了许多 React 组件 我想通过 NPM 共享它们 所以我很自然地 将这些组件放入 私有 GitHub 存储库中 将该存储库添加到主项目中package json 为了能够同时在组件库上进行开发 我使用
  • HTML 下载和文本提取

    下载 URL 列表并仅提取文本内容的好工具或工具集是什么 不需要蜘蛛 但可以控制下载文件名 并且线程将是一个额外的好处 平台是linux wget http linux die net man 1 wget html2ascii http
  • 创建 CA 证书的 x.509 V3 扩展基本约束和密钥用法有什么区别?

    这两个动作似乎做了同样的事情 使用基本约束X 509 证书中的扩展名以表明它是 CA 证书 并且 使用按键用法扩展名例如表示公钥可用于证书签名 这些扩展有什么区别 它们是否有相同的目的或相辅相成 密钥用法 定义了可以使用证书中包含的密钥执行
  • Postgres pg_dump 缓存查找索引失败

    我正在尝试使用以下命令创建 postgres 数据库的备份 省略详细信息 pg dump h host p 5432 U user db gt db sql 一段时间后 我收到错误 已格式化 pg dump archiver db quer
  • 启动期间生成的 ELF 可执行文件段错误

    我正在生成一个 ELF 可执行文件 并将 text 部分加载到 LOAD 段中 它可以很好地拆卸 但尝试在下面运行它gdb gives During startup program terminated with signal SIGSEG
  • 如何在CSS中设置超细“font-weight”(小于100)?

    我想让文字超细 小于 font weight 100 这可以用 CSS 来做吗 Like this but with helvetica 处理 Web 字体时 CSS 字体粗细不会 使字体变细 或加粗 对于未从 url 加载的字体font
  • XML 序列化问题 - 如何序列化一个对象中的元素、属性和文本

    我是使用 NET 进行 XML 序列化的新手 在使用它一段时间后 我现在感到很困惑 我可以序列化具有包含其他元素的属性的元素 但如何序列化类似的内容
  • lodash:使用不同的对象数组过滤对象数组

    这个问题具体针对lodash https lodash com docs 给定两个对象数组 什么是best way用另一个数组的对象过滤一个数组 我试图提出下面的一个场景 我这样做的方法是使用两个 forEach循环 但我想知道使用 lod
  • 在 C# 中根据引用的 XSD 验证 XML

    我有一个具有指定架构位置的 XML 文件 如下所示 xsi schemaLocation someurl localSchemaPath xsd 我想用 C 进行验证 当我打开文件时 Visual Studio 会根据架构验证它并完美列出错
  • SAM 无需重建即可运行

    我已经开始使用AWS SAM for python 在本地测试我的功能时 我运行 sam build use container sam local start api You can now browse to the above end
  • 支持词法范围 ScriptBlock 参数(例如Where-Object)

    考虑以下任意函数和测试用例 Function Foo MyBar Param Parameter Mandatory false ScriptBlock Filter if Filter Filter true Filter Filter
  • 默认 MaxPoolingOp 仅在使用从 GPU 移植的训练模型时在设备类型 CPU 错误上支持 NHWC

    我使用 python keras 和 tensorflow 在 PC 上开发并训练了一个模型 并使用 GPU 运行预测等 一切正常 然后 我将模型和预测代码转移到笔记本电脑上 并使用requirements txt重建环境 将gpu包交换为
  • 在 Servlet 中使用 Bean

    我有一个 jsp 页面 index jsp 其中包含两个文本字段用户名和密码的表单
  • 我如何学习设计这样的用户界面?

    我最近在使用该应用程序Secret https www secret ly 并正在观察它拥有的令人惊叹的用户界面 如果您正在打开 Secret 的网页 请向下滚动一点以查看 UI 作为一个Android新手 想学习的人 我想问一下这个UI是
  • 如何使用 PagingAndSortingRepository 不返回特定列

    我知道标题可能听起来有点令人困惑 但我不知道如何在标题上总结我的问题 我的主要问题是我不想使用 PagingAndSortingRepository 返回特定列 想象一下以下场景 我有两个实体 一个称为 用户 Entity Table na
  • 阻止直到按下按键或一天中的给定时间

    如何阻止直到 1 按键或 2 之前输入的一天中的时间 以较早者为准 hh mm格式已达到 我正在使用 Windows 以防万一 这DOS汇编程序 http www robvanderwoude com downloads batchman
  • Android Bundle 简单单元测试不起作用

    我对 android 很陌生 并试图了解捆绑包的工作原理 我被以下单元测试阻止 有人可以解释一下为什么失败吗 Test public void testBundle throws Exception Bundle bundle new Bu
  • 当“react-native run-ios”时端口 8081 已被使用

    是的 我已经读过这篇文章 但仍然不知道如何使其发挥作用 反应本机 端口 8081 已在使用中 打包器未运行或未正确运行命令 bin sh 失败 退出代码为 2 https stackoverflow com questions 302164
  • ES6 标记模板实用性

    我了解ES6的语法标记模板 https developer mozilla org en US docs Web JavaScript Reference template strings Tagged template strings 我