模板文字如何制定？通用规则？答案

【问题标题】：Template Literals How To Make a ?Universal Rule?模板文字如何制定？通用规则？
【发布时间】：2017-06-03 16:05:36
【问题描述】：

我是编码新手，但我在使用 css 变量的项目中使用模板文字。此示例在函数内一次性设置所有变量。这是指所有输入都有事件监听器。

document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);

我想为跨度设置另一个规则来显示值。现在我正在像这样单独做每一个。

heightDisplay.innerHTML = height.value + 'px';
widthDisplay.innerHTML = width.value + 'px';

所有 span 的 id 都是“this.name + 'Display'” 我想纠正一个使用文字一次设置它们的规则（类似于设置变量的规则），而不是编写 30 行代码。

我无法弄清楚在那里添加 Display 的语法，我不知道在哪里放置反勾号。

我认为这是可能的，因为 Javascript 中的几乎所有内容都是如此。感谢您的宝贵时间。

【问题讨论】：

【解决方案1】：

我假设您有一个执行此代码行的迭代：document.documentElement.style.setProperty(--${this.name}, this.value + suffix);

在此迭代中，您可以像这样设置跨度的值：

var Span = document.querySelector(`[id*= ${this.name}]`);

Span.innerHTML =  this.value+ "px";

编辑： querySelector - 函数获取一个 css-selector 作为参数。 [] - Brackets 是一个 CSS 选择器，它获取具有属性（在本例中为 id）和值（this.name）的元素。它们之间的 *= 表示您可以选择在属性值中具有子字符串的元素。

【讨论】：

谢谢。有用。我不太明白。我们为什么要大写 Span？而且我之前没有在文字中使用 [] 或 *.
我会遇到问题。我有一些我想制作的跨度将“度”作为标签或根本没有标签。我可以手动输入像'px'这样的标签，而不是Span.innerHTML使用Span.prepend吗？？
所以您想在特殊情况下使用“deg”而不是“px”？然后你需要在这个代码行之前添加一个 if 语句：Span.innerHTML = this.value+ "px"; 然后你必须决定你想要一个“px”还是一个度数。示例：if(degInsteadOfPX){Span.innerHTML = this.value+ "deg"; }else{Span.innerHTML = this.value+ "px";} 请注意，您需要以某种方式设置 degInsteadOfPX 并决定在您的跨度中是否需要 deg 或 px。顺便说一句，您可以将我的答案标记为正确吗（我正确回答了您的问题:)）
谢谢。我最终使用 + 后缀而不是“px”。我忘了我已经解决了这个问题。我很好奇的是 Span 的大写（为什么）和 id 之后的 * 是 [] 一种条件类型，它与 span id 与 this.name 匹配，* 表示任何东西都可以出现在这种情况下，例如 Display )??
我编辑了答案。有关更多信息，请查看此页面：w3schools.com/cssref/sel_attr_contain.asp