如何从请求响应字符串中稳定提取整型xp值 适配字段值变动场景

读取浏览器控制台返回值时需要提取嵌套结构里的xp值，返回内容结构如下：

原有硬编码字符串替换的实现仅能在字段值固定的场景生效，一旦其他字段数值动态变化就会失效，需要实现不受字段值变动影响、可稳定提取xp整型值的方案。

原有硬编码实现代码如下：

const quests = result.data.quests;
console.log(quests[1]);
var exp = quests[1].rewards;
var xp = exp.replaceAll('{"coins":3,"xp":', "");
var xp = xp.replaceAll(',"honor":0,"premium":0,"statPoints":0,"item":0}', "");
var xp = parseInt(xp);
console.log(xp);

硬编码方案失效的核心原因是：rewards字段本身是JSON格式序列化后的字符串，靠字符串截取、固定内容替换的方式完全不兼容字段值变动、字段顺序调整的场景。最稳妥的实现方式是直接将这个JSON字符串解析为原生JavaScript对象，之后直接读取xp属性即可，完全不受其他字段值变化的影响。

基础实现 #

针对当前取quests[1]对应xp值的场景，代码可以简化为：

const quests = result.data.quests;
// 将rewards的JSON字符串解析为JS对象
const rewardData = JSON.parse(quests[1].rewards);
// 直接读取xp属性，本身就是数值类型，不需要额外做字符串转整型操作
const xp = rewardData.xp;
console.log(xp);

扩展兼容实现 #

• 如果需要批量获取所有任务的xp值，直接遍历数组即可，不需要写死索引：

const quests = result.data.quests;
quests.forEach((quest, idx) => {
  const reward = JSON.parse(quest.rewards);
  console.log(`索引为${idx}的任务xp值：`, reward.xp);
});

• 如果存在部分接口返回场景下rewards字段已经是对象、不是JSON字符串的情况，可以加层类型判断做容错，避免JSON解析报错：

// 封装通用提取方法
function getXpFromQuest(quest) {
  const reward = typeof quest.rewards === 'string' 
    ? JSON.parse(quest.rewards) 
    : quest.rewards;
  return reward.xp;
}

// 调用示例
const targetXp = getXpFromQuest(result.data.quests[1]);
console.log(targetXp);

注意：如果遇到JSON.parse报错的情况，可以先打印下对应quest.rewards的原始值，确认是否存在转义字符、格式异常的问题，绝大多数正常接口返回的标准JSON字符串都可以直接解析。

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