JavaScript游戏背景图片切换问题：模板字符串变量未正确解析

你代码里的几个错误点： #

• 数组里的图片路径没加引号：image1.jpg这类字符串必须用单引号或双引号包裹，不然JS会把它们当作变量名去查找，导致报错。
• 模板字符串插值错误：你用了反引号，但变量images[randomImagesIndex]没有用${}包裹，所以浏览器直接把它当成文件名images[randomImagesIndex]去查找，自然找不到文件。
• 不存在getRandom原生函数：JS里没有自带的getRandom方法，得用Math.random()来实现随机索引。
• 拼写错误：image2.jpag应该是image2.jpg，后缀写错了会导致图片加载失败。

修正后的完整代码： #

// 给图片路径加上引号，修正拼写错误
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

// 实现随机索引：Math.random()返回0~1的数，乘以数组长度后取整得到0到数组长度-1的索引
var randomImagesIndex = Math.floor(Math.random() * images.length);

// 用${}插值变量，正确解析数组里的图片路径
box.style.backgroundImage = `url('${images[randomImagesIndex]}')`;

额外说明： #

• 模板字符串中，要插入变量或表达式必须用${变量/表达式}的格式，这样JS才会把里面的内容解析成对应的值，而不是字符串字面量。
• Math.floor(Math.random() * images.length)能保证得到的索引在0到images.length-1之间，刚好对应数组的有效下标，不会出现越界问题。

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