JavaScript中如何用已有const对象的值替换URL中的对应变量

• 变量重复声明：同一作用域内先后用var和let声明同名变量newAnimal，会触发语法错误。
• 取值逻辑错误：无需调用replace方法，直接以animalURL为键取animal对象的对应值即可，直接传入整个对象作为替换参数只会得到[object Object]的错误结果。
• 变量拼写错误：最后赋值innerHTML时将newAnimal错写为newAmimal，会触发未定义变量报错。

const animal = {
  "Dogs3": "Dog",
  "cat1": "Cats",
  "Fish2": "Fish",
};

// 调整变量名避免重复声明
const originalUrl = document.getElementById("newAnimal").href;
const animalURL = originalUrl.split("/")[3];
// 按键取值，增加兜底逻辑避免找不到匹配项时报错
const newAnimal = animal[animalURL] ?? animalURL;

const animalBtn = document.createElement("div");
animalBtn.setAttribute("id", "animalBtn");

document.body.appendChild(animalBtn);
document.getElementById("animalBtn").innerHTML = newAnimal;

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