从Google Sheets生成的JS变量无法读取，如何修复？

问题描述 #

我在Google Sheets的B1、B2单元格分别输入以下公式：
B1 = "name = " & "'" & A1 & "' ;"
B2 = "city = " & "'" & A2 & "' ;"
生成了合法的JS语句name = 'Prabhu Paul' ;和city = 'India' ;。随后将表格发布为.csv格式，获取对应URL，并通过WordPress的functions.php文件将该URL作为脚本添加到站点头部：

function ti_custom_javascript() {
    ?>
        <script type="text/javascript" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSQIORejF59NZEyEigMfHFpNcs-XCjKyUbTSrcWJcR0Mn3DO6oSHWeGfm3XvnqQBj1ipMI00I-r5qH7/pub?gid=0&single=true&range=b1:b2&output=csv"></script>
    <?php
}
add_action('wp_head', 'ti_custom_javascript');

之后在网页的自定义HTML块中编写代码尝试读取变量，期望段落显示为“Hi, This is Prabhu Paul, and I'm from India”，但无法读取变量值。

问题原因 #

CSV格式的文件会被浏览器当作纯文本解析，而非可执行的JavaScript代码。即便内容是合法的JS语句，浏览器也不会执行其中的代码，自然无法生成全局变量供后续读取。

修复步骤 #

1. 修改Google Sheets的输出格式参数 #

将发布链接中的output=csv改为output=txt，让浏览器加载纯文本格式的内容并当作JS执行：

function ti_custom_javascript() {
    ?>
        <script type="text/javascript" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSQIORejF59NZEyEigMfHFpNcs-XCjKyUbTSrcWJcR0Mn3DO6oSHWeGfm3XvnqQBj1ipMI00I-r5qH7/pub?gid=0&single=true&range=b1:b2&output=txt"></script>
    <?php
}
add_action('wp_head', 'ti_custom_javascript');

2. 确保变量在全局作用域定义（可选优化） #

为避免作用域问题，可修改Google Sheets的公式，给变量添加var或let声明：

• B1公式改为："var name = " & "'" & A1 & "' ;"
• B2公式改为："var city = " & "'" & A2 & "' ;"

3. 确保读取代码在脚本加载后执行 #

在自定义HTML块中，将读取变量的代码放在DOMContentLoaded事件监听内，保证脚本加载完成后再执行：

<script>
document.addEventListener('DOMContentLoaded', function() {
  const p = document.createElement('p');
  p.textContent = `Hi, This is ${name}, and I'm from ${city}`;
  // 替换为你的目标容器选择器，比如自定义HTML块内的某个元素ID
  document.querySelector('#your-target-element').appendChild(p);
});
</script>

内容的提问来源于stack exchange，提问作者Prabhu Paul