Question

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

我知道可以在PHP中执行此操作，如下所示：

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

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

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

注意

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

Answer 1

只需使用像PHP <=?标记这样的标记，就没有将JavaScript值注入HTML的原生方法。最接近的可能是ES6 template literals。

它看起来像这样：

var mystring = 'Hello World';

document.write(`

<p>${mystring}</p>

<div> 
   some other stuff
</div>

`);

这个版本的JavaScript现在在大多数浏览器中都可用，但当然不适用于旧的浏览器版本，也不适用于当前的Internet Explorer版本（我们感到惊讶吗？） - 但它适用于Edge。

HTML中没有允许按照类似PHP的语法注入JavaScript值的本机功能。在我看来，上面的内容尽可能接近。从HTML中访问JavaScript变量的唯一方法是使用特定属性（例如“onclick”） - 这是另一个目的 - 以及script标记，它们不像<?=那样工作PHP标记，但更像是标准<?php标记。

使用模板库可能是一种选择（例如mustache，underscore，EJS，handlerbars，pug，plates，{{ 3}}，dust.js，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属性具有要注入的值。这里是注入模板文字反引号的“库”。这也可以在第一个版本中完成。

/* 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}"' />

Answer 2

我不知道如何通过JavaScript实现您想要实现的目标。

我能想到的最接近的事情是：

＆＃13;

<script>var message = "Hello World";</script>

<div>Before message</div>
<div>
    <script>document.write(message);</script>
</div>
<div>After message</div>

＆＃13;

但建议avoid using document.write！

注意

根据您在评论中提供的信息，我认为您正在寻找以下方法之一：

将您的Twig模板替换为Mustache templates，其中包含官方PHP实现和官方JavaScript实现。
使用an (unofficial) port of Twig to JavaScript在JavaScript中处理您的Twig模板。

在HTML中扩展JavaScript变量

注意

2 个答案:

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

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

注意