Angular插值：含斜杠/的JSON对象键取值异常问题

嘿，这个问题我之前踩过坑！带特殊字符（比如斜杠/）的对象键确实没法用常规的点语法访问，哪怕你加引号写obj."a/b"也不行——因为点语法对键名的格式有严格要求。

核心解决方案：用方括号语法访问 #

不管是JavaScript还是TypeScript，只要键名包含非标识符字符（比如斜杠、空格、连字符等），都得用方括号+字符串键名的方式来取值，比如：

const jsonObj = {
  "a/b": 10,
  name: "test"
};

// 正确获取带斜杠的键值
const slashValue = jsonObj["a/b"];
console.log(slashValue); // 输出 10

// 普通键可以继续用点语法
const normalValue = jsonObj.name;
console.log(normalValue); // 输出 test

为什么点语法不行？ #

TypeScript（和JS）里的点语法要求键名是有效的标识符，标识符的规则是：只能包含字母、数字、下划线_和美元符号$，而且不能以数字开头。斜杠/不属于这些允许的字符，所以点语法会直接报错，哪怕你给键名加引号也没用。

TypeScript类型定义注意事项 #

如果是提前定义了类型的对象，要确保接口里的键名也用引号包裹，避免类型不匹配：

interface MyJson {
  "a/b": number;
  age: number;
}

const myData: MyJson = {
  "a/b": 20,
  age: 30
};

// 类型安全的访问
const value = myData["a/b"]; // 类型为number

如果是从后端接口获取的JSON字符串，解析后可以用类型断言来指定类型，再用方括号访问：

const jsonStr = '{"a/b": 15, "title": "demo"}';
const parsedObj = JSON.parse(jsonStr) as MyJson;
console.log(parsedObj["a/b"]); // 输出15

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