React Intl，如何在消息中添加数字？

Question

我有一个 en.json 文件如下：

{
    "doorClosing": {
      "defaultMessage": "Doors closing",
      "description": "Elevator doors are being closed"
    },
    "floorSelected": {
      "defaultMessage": "Floor selected: {floorSelected}",
      "description": "`The floor ${lift.floorSelected} has been selected`"
    },
    "floorSelectedInvalid": {
      "defaultMessage": "Invalid floor",
      "description": "The selected floor is not valid"
    },
    "idle": {
      "defaultMessage": "",
      "description": ""
    },
    "init": {
      "defaultMessage": "Initialisation",
      "description": "The system is being initialized"
    },
    "liftMoving": {
      "defaultMessage": "Elevator moving",
      "description": "Elevator is being moved to the floor selected"
    }
}

然后在代码的后面，我使用 let dashboardMsg = intl.formatMessage({id:msg});，其中 msg 是 json 文件中包含的密钥之一。
关于keyfloorSelected，我用的时候${lift.floorSelected}不是由这个变量中包含的数字翻译过来的
怎么了？还有其他方法还是我必须手动执行此操作？

Answer 1

你可以通过 values 属性传递变量:

"floorSelected": {
  "id": "selected.floor",
  "defaultMessage": "Floor selected: {floorSelected}",
}

//...

let dashboardMsg = intl.formatMessage({id:msg, values: {floorSelected: 5})

不确定这是否适用于描述。

Answer 2

formatMessage 将消息描述符和可选值对象作为参数。

formatMessage(messageDescriptor, values);

针对您的情况

formatMessage({ id: msg }, { floorSelected: 3 })

如果您确保将 id 属性添加到您的所有消息描述符中，那么您将不需要在每次要呈现文本时动态地构建一个对象。

Answer 3

你想要的是格式化参数。它是 ICU 消息语法的一部分，您可以查看 here 以获取更多参考。

"floorSelected": {
  "id": "floorSelected",
  "defaultMessage": "Floor selected: {floorSelected}",
  "description": "The floor {floorSelected} has been selected"
},
...

在你的代码中

const message = intl.formatMessage(messages.floorSelected, {
  floorSelected: lift.floorSelected
});

您还可以为参数指定 number type 以自定义数字的格式。这是一个例子：

Number: {num} {num, number, ::currency/USD} {num, number, ::compact-long}

当你调用这个方法时

intl.formatMessage(messages.numberExample, {
  num: 4200
})

会翻译成这个

Number: 4200 ,200.00 4.2 thousand

React Intl，如何在消息中添加数字？

React Intl, how to add a number in a message?

reactjs

react-intl

现场演示