汇率显示异常（始终显示N/A）的排查修复及货币转换库推荐咨询

嘿，我来帮你搞定这个汇率总是显示N/A的问题，顺便给你推荐几个好用的货币转换工具～

一、问题根源分析 #

你代码里的核心bug出在货币对的生成逻辑和下拉框选项值不匹配：

• 你的sender_currency和recipient_currency下拉框，选项值设成了完整的货币对（比如USD-NGN），而不是单个货币代码
• 当你选择后，currencyPair会变成USD-NGN-NGN-USD这种奇怪的格式，完全不在你定义的exchangeRates对象的键里，自然找不到对应汇率，只能显示N/A

二、快速修复步骤 #

1. 修正下拉框的选项值 #

把两个货币选择下拉框的value改成单个货币代码，而不是货币对：

<!-- Sender's Currency 下拉框修改后 -->
<div class="form-field">
<label for="sender_currency">Sender's Currency:</label>
<select name="sender_currency" id="sender_currency" onchange="calculateExchangeRate()">
<option value="">Select Currency</option>
<option value="USD">USD</option>
<option value="NGN">NGN</option>
<!-- Add other sender currencies here -->
</select>
</div>

<!-- Recipient's Currency 下拉框修改后 -->
<div class="form-field">
<label for="recipient_currency">Recipient's Currency:</label>
<select name="recipient_currency" id="recipient_currency" onchange="calculateExchangeRate()">
<option value="">Select Currency</option>
<option value="NGN">NGN</option>
<option value="USD">USD</option>
<!-- Add other recipient currencies here -->
</select>
</div>

2. 验证汇率匹配逻辑 #

现在你的exchangeRates对象键是"USD-NGN"、"NGN-USD"格式，修改下拉框后，currencyPair = senderCurrency + "-" + recipientCurrency就能完美匹配这些键了，原函数里的这部分逻辑不需要改动，选完货币对就能正常显示汇率。

3. 额外优化：初始状态提示（可选） #

如果想让未选货币时的提示更友好，可以调整函数里的初始判断：

// 在原函数的汇率判断前加这段
if (!senderCurrency || !recipientCurrency) {
  exchangeRateField.textContent = "请选择完整的货币对";
} else {
  // 原来的汇率匹配逻辑
  var currencyPair = senderCurrency + "-" + recipientCurrency;
  var exchangeRate = exchangeRates[currencyPair];
  if (exchangeRate !== undefined) {
    exchangeRateField.textContent = "Exchange Rate: " + exchangeRate.toFixed(4);
  } else {
    exchangeRateField.textContent = "暂不支持该货币对";
  }
}

三、更专业的货币转换库推荐 #

如果不想手动维护固定汇率，想获取实时/更准确的转换率，推荐这几个前端库：

• forex.js：轻量级前端库，支持实时汇率查询，用法简单，直接获取不同货币间的转换率
• money.js：专门处理货币转换的工具库，常和公开汇率API配合使用，支持批量转换和自定义汇率规则
• currency.js：不仅能处理汇率转换，还能自动格式化货币金额，非常适合支付类场景

这些库能帮你摆脱手动维护汇率的麻烦，直接获取更准确的实时数据。

备注：内容来源于stack exchange，提问作者Aniquel