一句话结论
开发者可利用 document.currentScript 属性替换自身，构建一种极简的浏览器端内联模板渲染机制，无需依赖外部库。
关键要点
- 该技巧核心在于利用原生浏览器属性 document.currentScript，它在执行 <script> 标签时指向当前正在执行的脚本元素。
- 通过调用 document.currentScript.replaceWith(...n)，脚本可以在页面加载时直接替换掉自身的 HTML 节点，实现动态内容注入。
- 定义一个简易箭头函数 $=(...n)=>document.currentScript.replaceWith(...n)，即可将 HTML 中的内联脚本转化为类似模板字符串的语法。
- 此方法允许在静态 HTML 中嵌入动态逻辑，例如显示当前年份，且无需 JavaScript 框架或复杂的 DOM 操作代码。
- 该技巧适用于需要轻量级、无依赖的客户端侧渲染场景，特别契合极简主义博客或工具站点的构建需求。
背景与事实
这一技术洞察由 Lean Rada 描述，并于 2026 年 10 月 17 日由知名技术博主 Simon Willison 在其博客 Link 栏目中报道。Simon Willison 作为 Python 开源社区的重要贡献者，常分享开发技巧与工具链新知，此篇文章旨在展示一种利用现代浏览器 Web API 的巧妙用法。
文章核心展示了一个具体的代码片段。在传统的服务器端渲染或复杂的客户端框架（如 React 或 Vue）之外，开发者可以使用原生 HTML 和 JavaScript 实现动态更新。具体示例代码如下：
```html
The year is <script>document.currentScript.replaceWith(new Date().getFullYear())</script>
```
当浏览器解析到 `<script>` 标签并执行其中的代码时，`document.currentScript` 会返回指向该 `<script>` 元素本身。调用 `replaceWith` 方法后，该脚本元素会被替换为 `new Date().getFullYear()` 返回的字符串或 DOM 节点。这意味着原本静态的“placeholder”文本被动态的当前年份所取代，实现了极致的“内联渲染”。
为了进一步降低使用门槛，文章提出了一个“迷你模板语言”的构想。通过定义一个单字符的辅助函数：
```javascript
$=(...n)=>document.currentScript.replaceWith(...n)
```
HTML 代码可以简化为：
```html
The year is <script>$(new Date().getFullYear())</script>
```
这种写法使得 HTML 模板看起来更干净，逻辑更直观。这种模式并非新的发明，而是对现有 DOM API 的创造性组合，展示了原生 JavaScript 在处理简单动态 UI 时的潜力。
Simon Willison 的博客近期还关注了其他技术动态，包括 Python 3.15 的版本更新、语音构建的新博客功能、Claude Haiku 5.5 模型发布，以及关于默认硬性预算上限的行业讨论。这些内容共同构成了当前（2026 年 10 月）技术社区的关注图谱，而 `document.currentScript` 技巧则属于“开发实战”类别中注重代码优雅性与轻量化的典型代表。
影响分析
对于中文前端开发者与全栈从业者而言，这一技巧虽然看似微小，但具有重要的工程启示意义。首先，它提供了一种“零依赖”的动态内容注入方案。在许多场景下，如显示时间戳、版本号或简单的用户配置项，引入完整的状态管理库或框架显得过于沉重。使用 `document.currentScript` 可以在不增加打包体积的情况下，实现页面局部的动态化。
其次，这一方法鼓励开发者重新审视原生 Web API 的能力。很多开发者习惯于使用 jQuery 或现代框架处理 DOM，而忽略了浏览器原生提供的强大功能。通过这种“技巧”的学习，开发者可以提升对 HTML 与 JS 交互底层机制的理解，从而在性能敏感或资源受限的环境（如嵌入式 Web 界面、离线应用）中设计出更健壮的解决方案。此外，这种“迷你模板语言”的思路对于构建无服务器端渲染的静态站点生成器（SSG）或边缘函数（Edge Functions）具有一定的参考价值，因为它展示了如何在 HTML 层面嵌入可执行的逻辑。
适用边界
该结论主要适用于纯客户端的简单动态内容展示，且要求目标浏览器支持 `document.currentScript` 属性（现代主流浏览器均已支持）。此方法不适用于复杂的数据绑定、大型状态管理或需要双向数据流的场景。由于 `replaceWith` 是单次的替换操作，它不具备持续监听数据变化的能力。此外，在严格的 CSP（内容安全策略）限制下，内联脚本可能会被阻止执行，因此该技巧在非受控或高安全等级的生产环境中需结合 CSP 配置谨慎使用。
孤本观察
本文观察认为，将 `document.currentScript` 用于自我替换并配合简写函数，实际上是在向静态 HTML 中注入一种“惰性求值”的能力。这种模式模糊了模板与逻辑的界限，体现了 Web 开发中追求极致简洁与原生能力的回归趋势。
常见问题
document.currentScript 技巧适用于哪些具体场景？
适用于轻量级、无依赖的客户端侧渲染场景，特别契合极简主义博客或工具站点，可用于显示当前年份等简单动态内容，适合嵌入式 Web 界面或离线应用。
在严格 CSP 环境下使用此技巧会有什么限制？
在严格的内容安全策略（CSP）限制下，内联脚本可能会被阻止执行，因此在高安全等级的生产环境中需结合 CSP 配置谨慎使用。
该方法具备持续监听数据变化的能力吗？
不具备。由于 replaceWith 是单次的替换操作，它不支持持续监听数据变化，也不适用于复杂的数据绑定、大型状态管理或需要双向数据流的场景。
如何利用辅助函数简化 HTML 代码？
定义箭头函数 $=(...n)=>document.currentScript.replaceWith(...n)，可将 <script>$(new Date().getFullYear())</script> 转化为类似模板字符串的简洁语法。