javascript - 在 HTML 中扩展 JavaScript 变量

Question

我正在尝试找到在 HTML 中扩展 JavaScript 变量值的方法。

我知道可以用 PHP 来做到这一点，如下所示:

<?php
   $myString = "Hello World";
?>

<p><?=$myString?></p>

是否可以使用类似的 native 内联标记在 JavaScript 中执行类似操作？

<小时/>

注意

我知道其他解决方案，例如调用其他函数，这正是我想要避免的。

Answer 1

没有一种原生方法可以仅使用 PHP <=? 标签之类的标签将 JavaScript 值注入(inject) HTML。最接近的可能是 ES6 template literals 。

它可以看起来像这样:

var mystring = 'Hello World';

document.write(`

<p>${mystring}</p>

<div> 
   some other stuff
</div>

`);

这个版本的 JavaScript 在当今的大多数浏览器中都可用，但当然不能在旧版浏览器中运行，也不能在当前的 Internet Explorer 版本中运行(我们感到惊讶吗？)——但它可以在 Edge 中运行。

HTML 中没有本地功能允许按照类似 PHP 的语法注入(inject) JavaScript 值。在我看来，以上内容已经是你能得到的最接近的了。从 HTML 中访问 JavaScript 变量的唯一方法是使用特定的属性(例如“onclick”)——它有另一个目的——以及 script 标签，它也不像 <?= PHP 标签那样工作，但更像标准 <?php 标签。

可以选择使用模板库(例如 mustache 、 underscore 、 EJS 、 handlerbars 、 pug 、 plates 、 dust.js 、 0x104 567916、hogan.js、jsrender、markupjs...)。

一个简单的、穷人的模板库 - 基于类/内容

上面列出的模板引擎提供了高级功能，但这里有一个非常基本的实现，可以理解这种 HTML:

<span class="template">`I want to say "${mystring}"`</span>

当页面加载时，“穷人的图书馆”应该将其呈现为:

<span>I want to say "Hello World"</span>

下面是执行此操作的代码:

/* my simple template library: you would include this from another JS file */
document.addEventListener("DOMContentLoaded", function(event) {
  var templates = document.getElementsByClassName('template');
  [].forEach.call(templates, function (template) {
    template.textContent = eval(template.textContent);
    template.setAttribute('class', '');
  });
});

/* my set of variables */
var mystring = 'Hello World';

# my simple template CSS
.template {display: none};

<span class="template">`I want to say "${mystring}"`</span>

一个简单的、穷人的模板库 - 基于属性

这是同一概念的变体。现在的语法是自定义标签 inject，其中 value 属性具有要注入(inject)的值。这里是注入(inject)模板文字反引号的“库”。这也可以在第一个版本中完成。

/* my simple template library: you would include this from another JS file */
document.addEventListener("DOMContentLoaded", function(event) {
  var templates = document.getElementsByTagName('inject');
  [].forEach.call(templates, function (template) {
    template.textContent = eval('`' + template.getAttribute('value') + '`');
    template.removeAttribute('value');
  });
});

/* my set of variables */
var mystring = 'Hello World';

<inject value='I want to say "${mystring}"' />