React Intl消息插入数字问题：floorSelected变量未替换排查

问题根源 #

你遇到的问题核心很明确：intl.formatMessage 要替换消息里的占位符时，必须显式传递包含对应变量的values参数。你当前的调用只传入了消息ID，没有提供floorSelected变量的具体值，所以模板里的{floorSelected}自然不会被替换成实际数字。

看你的en.json配置：

"floorSelected": {
  "defaultMessage": "Floor selected: {floorSelected}",
  "description": "`The floor ${lift.floorSelected} has been selected`"
}

这里要注意：defaultMessage里的{floorSelected}是国际化库的占位符语法，而description里的${lift.floorSelected}只是给开发者看的注释说明，和实际消息渲染无关，两者不能混淆。

正确的调用方式 #

只需要修改formatMessage的调用，补充values参数，把lift.floorSelected的值传进去就行：

let dashboardMsg = intl.formatMessage(
  { id: 'floorSelected' },
  { floorSelected: lift.floorSelected } // 这里传入占位符对应的变量值
);

这样调用后，占位符就会被lift.floorSelected的实际数值替换了。

可选的简化实现方式 #

如果觉得每次手动传values太繁琐，可以封装一个工具函数来简化调用：

// 封装一个适配电梯场景的格式化函数
const formatLiftMsg = (msgId, customValues = {}) => {
  // 预设常用的电梯相关变量
  const defaultValues = {
    floorSelected: lift.floorSelected
  };
  // 合并默认值和自定义值，自定义值优先级更高
  return intl.formatMessage({ id: msgId }, { ...defaultValues, ...customValues });
};

// 调用示例：使用默认值
let dashboardMsg = formatLiftMsg('floorSelected');
// 调用示例：覆盖默认值
let customFloorMsg = formatLiftMsg('floorSelected', { floorSelected: 7 });

如果你用的是React-Intl这类框架，还可以用组件式写法，更直观：

<FormattedMessage 
  id="floorSelected" 
  values={{ floorSelected: lift.floorSelected }} 
/>

额外注意点 #

一定要区分开：国际化消息的占位符是{变量名}，而JavaScript模板字符串是${变量名}——前者是国际化库的专用语法，后者是JS原生语法，两者不能混用。你的description字段里的模板字符串只是注释，不会参与实际的消息渲染。

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