如何在JavaScript标记模板字符串中实现普通插值效果？

在Lit的html标记模板里，要实现动态标签名这类普通模板的插值效果，有几种实用的方法：

方法1：使用Lit官方支持的动态标签语法 #

Lit本身就支持直接将变量作为标签名使用，这是最符合设计规范且安全的写法：

import { html } from 'lit';

const main_site_header_level = 'h1';
const name = 'Mary';

return html`<${main_site_header_level}>hello ${name}</${main_site_header_level}>`;

Lit会自动解析变量对应的标签名，效果和普通模板字符串的插值完全一致，同时还能保持标记模板的安全特性。

方法2：用unsafeHTML插入原始HTML字符串 #

如果需要更灵活的字符串拼接，可以先构造完整的HTML内容，再通过unsafeHTML直接插入：

import { html, unsafeHTML } from 'lit';

const main_site_header_level = 'h1';
const name = 'Mary';

return html`${unsafeHTML(`<${main_site_header_level}>hello ${name}</${main_site_header_level}>`)}`;

⚠️注意：这个方法会直接解析传入的HTML内容，必须确保变量内容完全可信，避免XSS攻击风险。

方法3：拼接字符串后传入模板 #

也可以先把动态内容拼成完整的HTML字符串，再直接传入html模板：

import { html } from 'lit';

const main_site_header_level = 'h1';
const name = 'Mary';
const headerContent = `<${main_site_header_level}>hello ${name}</${main_site_header_level}>`;

return html`${headerContent}`;

同样需要注意内容安全性，不可用在用户可控的输入场景中。

内容的提问来源于stack exchange，提问作者Michael Scott Asato Cuthbert