2015款Mac Catalina下JavaScript单双引号不生效问题求助

问题背景 #

• 新手学习JavaScript阶段，编写代码时单/双引号包裹的字符串逻辑始终无法正常运行，先后更换Atom、Sublime Text、Visual Studio三款编辑器排查，问题均未解决
• 运行环境：2015款MacBook Pro，Catalina 10.15.7系统，使用Safari做调试浏览器
• 测试代码如下：

let images = [...document.querySelectorAll('.img')];
let slider = document.querySelector('.slider');
let sliderWidth;
let imageWidth;
let current = 0;
let target = 0;
let ease = .05;

images.forEach((img, idx) => {
 img.style.backgroundImage = 'url(./images/${idx+1}.jpeg)'
});

function lerp(start, end, t){
return start * (1-t) + end * t;
 }

function setTransform(el, transformat){
  el.style.transform = transform;
}
function init(){
  sliderWidth = slider.getBoundingClientRect().width;
   imageWidth = sliderWidth / images.lengh;
  document.body.style.height = '${sliderWidth - (window, innerWidth -   window, innerHeight)}px'
 }

问题原因 #

和编辑器、设备环境没有关系，是语法使用错误：

1. 核心问题：JS中要让${表达式}格式的字符串插值生效，必须用反引号（键盘左上角和~共键的`符号）包裹内容，也就是模板字符串语法。单引号、双引号包裹的内容只会被识别为普通文本，不会解析内部的占位符，这就是引号逻辑不符合预期的根本原因。
2. 代码中存在多处拼写、语法错误，即使改了引号也会运行失败：
   • setTransform函数形参写为transformat，内部却调用了未定义的transform变量
   • 数组长度属性拼写错误：images.lengh正确写法为images.length
   • window属性访问多写了逗号：window, innerWidth、window, innerHeight中的逗号是多余的，正确写法为window.innerWidth、window.innerHeight
   • 设置body高度的字符串同样误用单引号，需替换为反引号才能解析插值
   • 代码写完后没有调用init()方法，初始化逻辑永远不会执行

修正后完整代码 #

let images = [...document.querySelectorAll('.img')];
let slider = document.querySelector('.slider');
let sliderWidth;
let imageWidth;
let current = 0;
let target = 0;
let ease = .05;

images.forEach((img, idx) => {
  // 替换单引号为反引号
  img.style.backgroundImage = `url(./images/${idx+1}.jpeg)`
});

function lerp(start, end, t){
  return start * (1-t) + end * t;
}

function setTransform(el, transform){
  // 统一形参和内部使用的变量名
  el.style.transform = transform;
}
function init(){
  sliderWidth = slider.getBoundingClientRect().width;
  // 修正length拼写
  imageWidth = sliderWidth / images.length;
  // 替换单引号为反引号，删除window后多余的逗号
  document.body.style.height = `${sliderWidth - (window.innerWidth - window.innerHeight)}px`
}

// 调用初始化函数
init()

补充：JS中单引号、双引号的字符串功能基本一致，只有反引号包裹的模板字符串支持多行文本、插值表达式、标签模板等特性，属于基础语法规则，和开发工具、运行设备无关。

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