JavaScript字符串数组传入字符串字面量时如何保留元素引号

要实现将字符串数组转为带单引号包裹元素的格式，同时避免大数精度丢失，你可以用以下两种方法：

方法1：预先格式化数组（推荐，更清晰） #

先把数组的每个元素用单引号包裹，再拼接成字符串，之后插入到模板字面量中：

var array = ['1','2556','3','4','5'];
// 预先处理数组：给每个元素加单引号，再用逗号连接
var formattedArr = array.map(item => `'${item}'`).join(',');

var output = `
<script>
    window.stringArray = [${formattedArr}]
</script>
`

方法2：直接在模板字面量中处理 #

如果不想新增变量，也可以直接在模板里完成处理：

var array = ['1','2556','3','4','5'];

var output = `
<script>
    window.stringArray = [${array.map(item => `'${item}'`).join(',')}]
</script>
`

为什么原来的方法不行？ #

• 直接拼接array时，数组会调用toString()方法，将元素用逗号分隔，但不会保留字符串的引号，导致输出看起来像数字，大数会因为被解析为数值而丢失精度。
• 你尝试的array.map(String)只是确保元素是字符串类型，但数组toString()后依然不会添加引号，所以效果和直接拼接原数组一致。

备选：使用JSON.stringify（双引号格式） #

如果可以接受双引号包裹元素，用JSON.stringify是更安全的方式，它会严格保留字符串类型，完全避免大数精度问题：

var array = ['1','2556','3','4','5'];

var output = `
<script>
    window.stringArray = ${JSON.stringify(array)}
</script>
`

输出结果会是：

<script>
    window.stringArray = ["1","2556","3","4","5"]
</script>

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