Javascript constructor参数传入函数仅字符串类型触发报错问题

问题根源 #

你遇到的报错和constructor参数类型无关，是拼接内联事件代码时字符串参数未加引号导致的语法错误：
你在addToMenu方法中写的onclick逻辑是：

<button onclick="addToOrder(${this.price}, ${this.name})">Add to order</button>

当this.name是"Classic Vegetarian"字符串时，插值后实际生成的HTML是：

<button onclick="addToOrder(14.99, Classic Vegetarian)">Add to order</button>

这里Classic Vegetarian没有被引号包裹，JS会把它识别为未定义的变量，再加上中间有空格，直接触发语法错误，报缺少)的提示。如果name是数值类型，不需要引号也能被JS正确识别为字面量，所以不会报错。

修复方案 #

方案1：简单适配（适合小项目无特殊字符场景） #

给字符串参数包裹转义后的引号即可，修改addToMenu中的onclick代码：

// 用单引号包裹name参数即可
<button onclick="addToOrder(${this.price}, '${this.name}')">Add to order</button>

如果你的餐品名称可能包含单引号，可以改用转义的双引号包裹：

<button onclick="addToOrder(${this.price}, \"${this.name}\")">Add to order</button>

方案2：更安全的实现（推荐） #

不要用拼接HTML字符串的方式生成带事件的元素，改用DOM API创建元素绑定事件，彻底避免字符串拼接带来的语法漏洞：

// 修改addToMenu方法，返回DOM节点而不是字符串
addToMenu(){
    const container = document.createElement('div');
    container.innerHTML = `
    <h2>${this.name}:</h2>
    <p>${this.ingredient}</p>
    <p>$${this.price}</p>
    `
    const btn = document.createElement('button');
    btn.innerText = 'Add to order';
    // 直接绑定事件，传参不需要处理字符串格式
    btn.addEventListener('click', () => addToOrder(this.price, this.name));
    container.appendChild(btn);
    return container;
}

对应的插入DOM的代码也要修改：

// 原来的innerHTML改成appendChild，因为现在返回的是DOM节点
document.querySelector(".product1").appendChild(classicVeg.addToMenu());

关于你提到的constructor参数类型指定 #

原生JS是弱类型语言，没有内置的constructor参数强制类型声明的功能，如果需要类型校验可以手动在constructor里加判断逻辑，但是这个逻辑并不能解决你本次遇到的语法拼接错误问题。

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