基于jQuery的货币转换器输出NaN问题排查与功能实现需求

导致NaN输出的核心原因 #

• 缺失allCurrencies对象：代码中多次用allCurrencies[currency]获取货币全称，但该对象从未定义，会引发异常并干扰后续计算。
• 未处理无效输入：用户未输入金额、输入非数字内容，或未选择目标货币时，usd或rate会变为undefined/非数字，相乘后得到NaN。
• HTML标签转义错误：创建<option>时误用<和>，无法正确生成下拉选项，导致货币选择失效。

修复后的完整代码 #

// 新增货币全称映射对象
var allCurrencies = {
  "BTC": "Bitcoin",
  "CAD": "Canadian Dollar",
  "EUR": "Euro",
  "JPY": "Japanese Yen",
  "USD": "US Dollar"
};

// Initial data for exchange rates
var exchangeRates = {
  "disclaimer": "Usage subject to terms: https://openexchangerates.org/terms",
  "license": "https://openexchangerates.org/license",
  "timestamp": 1534107604,
  "base": "USD",
  "rates": {
    "BTC": 0.000157753542,
    "CAD": 1.316853,
    "EUR": 0.879353,
    "JPY": 110.46550427,
    "USD": 1
  }
};

$(document).ready(function() {

  // 更新目标货币下拉选项
  function updateToCurrencyOptions() {
    var $toCurrencySelect = $('#toCurrency');
    $toCurrencySelect.empty(); // 清空原有选项，避免重复添加

    // 添加默认提示选项
    var $selectOption = $('<option>', {value: '', disabled: true, selected: true}).text('Select currency');
    $toCurrencySelect.append($selectOption);

    // 遍历汇率生成选项
    for (var currency in exchangeRates.rates) {
      var abbreviation = currency;
      var fullName = allCurrencies[currency];
      var $option = $('<option>', {value: abbreviation}).text(fullName + ' (' + abbreviation + ')');
      $toCurrencySelect.append($option);
    }
  }

  // 转换货币并更新结果显示
  function updateResultCurrency() {
    var usd = parseFloat($('#usdAmount').val());
    var currency = $('#toCurrency').val();

    // 处理无效输入
    if (isNaN(usd) || !currency) {
      $('#resultCurrency').val('---.--');
      $('#resultLabel').text('To Currency ():');
      return;
    }

    // 计算转换结果
    var rate = exchangeRates.rates[currency];
    var converted = usd * rate;
    converted = Math.round(converted * 100) / 100;

    // 更新结果输入框和标签
    $('#resultCurrency').val(converted.toFixed(2));
    var fullName = allCurrencies[currency];
    $('#resultLabel').text(fullName + ' (' + currency + '):');
  }

  // 更新汇率数据
  function updateExchangeRates() {
    var newRatesJson = $('#exchangeRates').val();
    try {
      var newRates = JSON.parse(newRatesJson);
      // 验证汇率格式合法性
      if (newRates && newRates.rates && typeof newRates.rates === 'object') {
        exchangeRates = newRates;
        updateToCurrencyOptions();
        $('#resultCurrency').val('---.--');
        $('#resultLabel').text('To Currency ():');
      } else {
        alert('无效的汇率格式');
      }
    } catch (e) {
      alert('JSON解析失败，请检查输入格式');
    }
  }

  // 页面初始化与事件绑定
  updateToCurrencyOptions();
  $('#toCurrency').change(updateResultCurrency);
  $('#usdAmount').on('input', updateResultCurrency); // 输入金额时实时更新结果
  $('#updateRatesButton').click(updateExchangeRates);

});

关键修复说明 #

1. 补充货币全称映射：新增allCurrencies对象，解决货币全称未定义的问题。
2. 修复标签转义错误：将</>替换为</>，确保下拉选项正常生成。
3. 输入有效性校验：用parseFloat转换输入金额，判断是否为有效数字、是否选择货币，无效时重置结果。
4. 增强容错性：给汇率更新添加try-catch和格式验证，避免非法输入导致崩溃。
5. 优化交互体验：给金额输入框添加input事件，实现实时转换更新。

内容的提问来源于stack exchange，提问作者Othello D. Herbert