ES6 模板文字可以在运行时替换(或重用)吗?

2024-05-11

tl;dr:是否可以制作可重用的模板文字?

我一直在尝试使用模板文字,但我想我就是不明白,现在我感到沮丧。我的意思是,我想我明白了,但“它”不应该是它的运作方式,或者它应该如何实现。它应该变得不同。

我看到的所有示例(甚至标记模板)都要求“替换”在声明时完成,而不是运行时完成,这对我来说对于模板来说完全没有用处。也许我疯了,但对我来说,“模板”是一个包含令牌的文档,这些令牌在您使用它时被替换,而不是在您创建它时被替换,否则它只是一个文档(即字符串)。模板与令牌一起存储作为代币当你...评估它时,这些标记就会被评估。

每个人都举了一个可怕的例子,类似于:

var a = 'asd';
return `Worthless ${a}!`

很好,但如果我已经知道了a,我只想return 'Worthless asd' or return 'Worthless '+a。重点是什么?严重地。好吧,重点是懒惰;优点更少,可读性更强。伟大的。但这不是模板!恕我直言,不是。 MHO 才是最重要的!恕我直言,问题是模板在声明时会被评估,所以,如果你这样做,恕我直言:

var tpl = `My ${expletive} template`;
function go() { return tpl; }
go(); // SPACE-TIME ENDS!

Since expletive未声明,它输出类似My undefined template。极好的。实际上,至少在 Chrome 中,我什至无法声明模板;它会抛出一个错误,因为expletive没有定义。我需要的是能够在声明模板后进行替换:

var tpl = `My ${expletive} template`;
function go() { return tpl; }
var expletive = 'great';
go(); // My great template

然而我不明白这是怎么可能的,因为这些并不是真正的模板。即使你说我应该使用标签,不,它们不起作用:

> explete = function(a,b) { console.log(a); console.log(b); }
< function (a,b) { console.log(a); console.log(b); }
> var tpl = explete`My ${expletive} template`
< VM2323:2 Uncaught ReferenceError: expletive is not defined...

这一切让我相信模板文字的命名严重错误,应该按照它们真正的样子来称呼:heredocs。我想“字面”部分应该给我提示(如,不可变)?

我错过了什么吗?有没有一种(好的)方法来制作可重用的模板文字?


我给你,可重用的模板文字:

> function out(t) { console.log(eval(t)); }
  var template = `\`This is
  my \${expletive} reusable
  template!\``;
  out(template);
  var expletive = 'curious';
  out(template);
  var expletive = 'AMAZING';
  out(template);
< This is
  my undefined reusable
  template!
  This is
  my curious reusable
  template!
  This is
  my AMAZING reusable
  template!

这是一个天真的“助手”功能......

function t(t) { return '`'+t.replace('{','${')+'`'; }
var template = t(`This is
my {expletive} reusable
template!`);

...使其“更好”。

我倾向于称它们为模板guterals,因为它们产生扭曲感觉的区域。


为了使这些文字像其他模板引擎一样工作,需要有一个中间形式。

执行此操作的最佳方法是使用Function构造函数。

const templateString = "Hello ${this.name}!";
const templateVars = {
    name: "world"    
}

const fillTemplate = function(templateString, templateVars){
    return new Function("return `"+templateString +"`;").call(templateVars);
}

console.log(fillTemplate(templateString, templateVars));

与其他模板引擎一样,您可以从其他位置(例如文件)获取该字符串。

使用此方法可能会出现一些问题(例如,模板标签更难添加)。由于后期插值,您也无法拥有内联 JavaScript 逻辑。这也可以通过一些想法来补救。

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

ES6 模板文字可以在运行时替换(或重用)吗? 的相关文章

  • 跨域iframe自动调整大小

    我正在使用 iframe 和 javascript 制作一个 Web 小部件 我想让我的 iframe 能够根据其内容 从其他域加载 调整大小 我做了一些搜索 包括在 Stack Overflow 上 我找到了几个主题 但我找不到关于这个问
  • 为什么 Eclipse 有时会对 JavaScript 中的数组数组发出警告?

    在 Eclipse 中 以下 JavaScript 行 var a1 1 2 3 4 生成警告 Type mismatch cannot convert from Number to any Type mismatch cannot con
  • 当名称是数组时如何使用 Javascript 修改 HTML Select

    我有两个同名的 html select 对象 它们是具有不同索引的数组 我想做的是 如果从类别 0 选择元素中选择 关闭 我想禁用类别 1 元素 我一直在尝试使用 document getElementsByName 但无法弄清楚如何专门针
  • moment.calendar() 没有时间

    我想使用不带时间的 moment calendar 选项 所以而不是 上周二下午 5 点 我想要 上周二 有人知道 Moment 现在是否有解决方案吗 我找到了这个小提琴http jsfiddle net nawxZ http jsfidd
  • 将 javascript 合并到一个文件中

    最近阅读了雅虎的网络优化技巧并使用 YSlow 我在我的一个网站上实现了他们的一些想法http www gwynfryncottages com http www gwynfryncottages com你可以在这里看到该文件http ww
  • 使用javascript在谷歌地图中绘制多边形

    我想在谷歌地图中绘制多边形 我正在使用示例代码http jsfiddle net rvsMH 1 http jsfiddle net rvsMH 1 但它不起作用并且没有获取数组或纬度 经度值 我不知道出了什么问题
  • jqgrid 在编辑框中选择不正确的下拉选项值

    我正在使用表单编辑 表单中有两个选择框 一个选择框是国家 地区 另一个选择框是州 州选择框取决于所选的国家 地区 并将动态填充 例如 Country 美国 期权价值 1 英国 期权价值 2 美国的状态 阿拉巴马州 选项值 1 加利福尼亚州
  • 通过搜索查找下一个文本并突出显示不起作用

    当在搜索框中搜索任何文本时 它可以找到并突出显示正确的文本 但是当搜索下一个 新文本时 它无法找到下一个 新文本 再次搜索时它不起作用 我无法找到问题 这JS below JS button search click function va
  • 从 JavaScript 将参数传递给 p:remoteCommand

    我想将值传递给remoteCommand来自 JavaScript 如果这是可能的 我该如何做到这一点以及如何在支持 bean 中接收它们 对的 这是可能的 如何执行此操作取决于 PrimeFaces 版本 你可以在PrimeFaces 用
  • Angular - Safari 无法正确显示 DOM

    我是 Angular 的新手 使用 Angular 4 我尝试通过在关联的组件类文件中设置属性来更新特定元素 但是 除非我尝试强制重新绘制网页 通过调整窗口大小等 否则页面不会更新 我打开检查器 看到 DOM 已更改 但显示与元素检查器中的
  • 无法读取setInterval(Hooks)中的最新状态变量[重复]

    这个问题在这里已经有答案了 我想这是因为 JS 的工作原理 但我想你不会在类中遇到这个问题 在此代码中 let open setOpen React useState false let counter setCounter React u
  • 以编程方式触发 highchart 散点图上某个点的单击事件

    实际上 我有一个小要求 其中有一个带有点列表和下拉列表的散点图 当我从下拉列表中选择一个项目时 应触发其相应的数据点单击 当我在图表上选择一个数据点时 必须执行一些操作 并且下拉列表应根据选择进行更新 我们有什么办法可以做到这一点吗 我尝试
  • Material.Angular.io mat-autocomplete [displayWith] 函数更新范围变量

    我遇到了一个问题 我可以在实例化 mat autocomplete 的组件控制器中访问本地声明的变量 我面临的问题是局部变量被困在这个范围内 我无法更新它们 有关更新 mat autocomplete 范围变量的任何想法或想法 最终我要做的
  • select 元素是否具有标准值属性?

    这是一个简单的问题 但我找不到任何参考资料 所以就在这里 假设我有一个选择元素
  • backbone.js:视图中影响集合中不同模型的按钮

    我刚刚开始使用backbone js 到目前为止 我真的很喜欢它 我有这样的事情 ModelA ModelB ViewA ViewB ModelA 持有 ModelB 的集合 如何使用按钮构建模型 B 的视图 单击该按钮会更改集合中下一个
  • 在部分渲染时执行 JavaScript

    我有一些 JavaScript 代码 我想在用户单击其文件夹之一后执行 它会触发 show 操作和 show js erb 从而呈 现部分内容 Show js erb 当用户单击其文件夹之一时触发 如下所示 body append 它成功注
  • 如何在 JavaScript 中从代理对构造 UTF-16 字符?

    以下计算 Unicode 代码点的 UTF 16 代理对 戴着医用口罩的脸 https emojipedia org face with medical mask 但是如何从代理对构造字符以在字符串中使用呢 const codepoint
  • 在 Javascript 中创建数组

    我对 javascript 不太熟悉 并且在用 javascript 制作 2d 或者也许我可能需要 3d 数组时遇到了一些麻烦 我目前需要收集 2 条信息 一个 ID 和一个值 因此我创建了以下内容 var myArray var id
  • 右列固定的 Div 表

    我最近接手了一个非营利网站作为一个项目 我正在使用一个现有的网站 所以我必须使用很多已经编程的东西 所以我所要做的就是创建设计 I made a diagram of basically what I can t figure out ho
  • 如何用时刻找到与给定时间最接近的时间?

    所以我有一个简单的代码 一个工作代码 它使用 moment 获取最接近给定时间的时间 Current time in millis const now moment 10 16 HH mm format x List of times co

随机推荐

  • Spring Oauth2. DaoAuthenticationProvider 中未设置密码编码器

    我对 Spring Oauth 和 Spring Security 很陌生 我正在尝试在我的项目中使用 client credentials 流程 现在 我设法使用自己的 CustomDetailsS ervice 来从系统中已存在的数据库
  • 通过API更新Twitter背景

    我在通过 Twitter 的 API 更新背景时遇到了一些问题 target url http www google com logos 11th birthday gif ch curl init curl setopt ch CURLO
  • 用于验证 InetSocketAddresses 的正则表达式(ipv4/v6 + 端口地址)

    我在寻找testedipv4 和 ipv6 的正则表达式InetSocket地址 http download oracle com javase 6 docs api java net InetSocketAddress html toSt
  • 在 WebView 中打开 PDF 文件

    大约 2 天 我尝试在我的自定义中打开 PDF 文件WebvView 这是我的WebView code import android app AlertDialog import android app ProgressDialog imp
  • 当我移动我的 pygame 角色时,它会留下痕迹[重复]

    这个问题在这里已经有答案了 我一直在尝试用 Python 制作一个游戏 但是当我移动我的角色时 它会留下痕迹 我知道它并没有显示出那么多 但如果你靠近的话 你可以看到这条踪迹 这真的让我很困扰 这是我的代码 import pygame im
  • jQuery异步ajax查询和返回值问题(范围、闭包)

    由于异步查询和变量范围问题 代码无法正常工作 我不明白如何解决这个问题 使用 async false 更改为 ajax 方法 不是一个选项 我知道闭包 但我如何在这里实现它 不知道 我已经在这里看到了有关 js 中的闭包和 jQuery 异
  • Win7下Jupyter Notebook中撤消文本输入

    我很惊讶我没有在 Win7 下的 Jupyter Notebook 上或在网络上找到这个问题的答案 我只是错误地覆盖了调用块的大部分 但不是全部 自动保存可以追溯到之前的一些我不想恢复的更改 Jupyter Notebook 中文本输入的撤
  • android中ScrollView中的图像

    在我的应用程序中 我想放置一个 png 文件 并且希望它在横向和纵向模式下都被视为滚动图像 请建议代码或示例 要使您的 Imageview 在高度不适合时滚动 您可以在 xml 中的 ScrollView 内添加一个 ImageView 并
  • 即使在 Excel 2007 中插入行时也保持绝对引用

    我有一个电子表格 我希望单元格公式始终查看特定单元格 即使插入行或列并且特定单元格移动也是如此 实际上 我总是想查看表格的 顶部 单元格 即使在表格顶部插入了新行 例如 单元格 A2 的公式为 E 2 现在我突出显示第 1 行并执行 插入行
  • std::make_pair 与浮点数组(float2,无符号整数)

    我有一个用 float2 unsigned int 对模板化的向量 例如 std vector
  • 当我们第一次部署 WAR 文件时,某些代码可以运行吗?

    是否有任何方法或 API 可以使用 以便每当我部署新的 WAR 文件时 部分代码都应该执行 或者当 Tomcat 启动时 相应的 servlet 应该连续启动或运行一些代码 恢复一个老问题 因为唯一的答案没有显示任何例子 为了在部署 取消部
  • 返回即将推出的 YouTube API V3 视频安排日期?

    我想要返回 YouTube 中的直播的安排日期 Example of scheduled streams YT链接 https www youtube com channel UCP7jMXSY2xbc3KCAE0MHQ A https w
  • Pandas 使用什么规则来生成视图和副本?

    我对 Pandas 在决定数据帧中的选择是原始数据帧的副本或原始数据帧的视图时使用的规则感到困惑 例如 如果我有 df pd DataFrame np random randn 8 8 columns list ABCDEFGH index
  • Inno Setup安装先决条件[重复]

    这个问题在这里已经有答案了 我正在通过 Inno Setup 创建一个安装程序 我看到很多关于如何检测先决条件是否存在的代码示例 但没有任何关于当我找不到先决条件时如何实际安装先决条件的代码示例 我确信它非常简单 但是我该如何安装先决条件呢
  • 原子存储抛出错误

    我最近升级到了 C 11 兼容编译器 并且尝试将一些代码从 boost 更新到 c 11 标准 我在使用atomic store转换一些代码时遇到了问题 这是一些简单的测试代码 似乎会引发编译器错误 int main std shared
  • 在 grpc python 中处理异步流请求

    我试图了解如何使用双向流处理 grpc api 使用 Python API 假设我有以下简单的服务器定义 syntax proto3 package simple service TestService rpc Translate stre
  • 检测反射 DLL 注入

    在过去的几年中 恶意软件 以及一些渗透测试工具 如 Metasploit 的 meterpreter 负载 已经开始使用反射 DLL 注入 PDF http www harmonysecurity com files HS P005 Ref
  • 如何在 C++ 和 QML 应用程序中使用 qrc?

    我在 Windows7 上用 c qnd Qt Creator QML 编写了 Qt Quick Desktop 应用程序 现在 我必须部署它 并且我需要隐藏 qml 文件和图像 意味着 将它们放入资源等中 我读到有一个很好的方法可以使用
  • libgdx SpriteBatch 渲染到纹理

    是否可以使用 libGdx 适用于 Android 桌面的 Java 引擎 中的 SpriteBatch 渲染到纹理 如果是这样 怎么办 基本上我想将所有内容渲染到 512 x 256 纹理的 320 x 240 区域 然后缩放区域以适合屏
  • ES6 模板文字可以在运行时替换(或重用)吗?

    tl dr 是否可以制作可重用的模板文字 我一直在尝试使用模板文字 但我想我就是不明白 现在我感到沮丧 我的意思是 我想我明白了 但 它 不应该是它的运作方式 或者它应该如何实现 它应该变得不同 我看到的所有示例 甚至标记模板 都要求 替换