HTML/JS数字转单词转换器：111-119、1001等转换错误修复求助

问题描述 #

当前程序存在三个转换错误：

• 输入111-119区间数字时，结果显示为One Hundred undefined One，期望显示为One Hundred Eleven这类格式；
• 输入1001时，结果显示为One Thousand Hundred One，期望显示为One Thousand One；
• 输入1011-1019区间数字时，结果显示为One Thousand Hundred undefined One，期望显示为One Thousand Eleven这类格式。

错误原因分析 #

1. 111-119错误：处理三位数时直接拆分十位和个位，但11-19属于特殊数字，prefixes对象中没有十位为1的键，导致prefixes[tens]返回undefined；
2. 1001错误：处理四位数时，当百位为0时仍拼接了ones[hundreds] + " Hundred"，而ones[0]是空字符串，导致出现多余空格和"Hundred"；
3. 1011-1019错误：同时存在上述两个问题，既未处理10-19的特殊数字，又在百位为0时错误拼接了Hundred部分。

修复后的代码 #

index.html（无需修改） #

<!DOCTYPE html>
<html lang="en">
  <link rel="stylesheet" href="style.css">

  <body>
    <main>
      <form id="form">
        <label for="cft">Enter Number</label>
        <input type="number" id="num" name="num" />
        <input type="text" id="text" name="text" />
      </form>
    </main>

    <script src="script.js"></script>
  </body>
</html>

script.js #

const form = document.getElementById("form");
const num = document.getElementById("num");
const text = document.getElementById("text");

const ones = {
  0: "",
  1: "One",
  2: "Two",
  3: "Three",
  4: "Four",
  5: "Five",
  6: "Six",
  7: "Seven",
  8: "Eight",
  9: "Nine",
  10: "Ten",
  11: "Eleven",
  12: "Twelve",
  13: "Thirteen",
  14: "Fourteen",
  15: "Fifteen",
  16: "Sixteen",
  17: "Seventeen",
  18: "Eighteen",
  19: "Nineteen",
};

const prefixes = {
  2: "Twenty",
  3: "Thirty",
  4: "Forty",
  5: "Fifty",
  6: "Sixty",
  7: "Seventy",
  8: "Eighty",
  9: "Ninety",
};

// 处理0-99的数字转单词
function convertTwoDigits(num) {
  if (num <= 19) {
    return ones[num];
  } else {
    const tens = Math.floor(num / 10);
    const onesPlace = num % 10;
    return onesPlace === 0 ? prefixes[tens] : `${prefixes[tens]} ${ones[onesPlace]}`;
  }
}

num.addEventListener("input", function () {
  const number = +num.value;
  let words = "";

  if (number >= 0 && number <= 19) {
    words = ones[number];
  } else if (number >= 20 && number <= 99) {
    words = convertTwoDigits(number);
  } else if (number >= 100 && number <= 999) {
    const hundreds = Math.floor(number / 100);
    const remainder = number % 100;
    const remainderWords = convertTwoDigits(remainder);

    words = remainder === 0 
      ? `${ones[hundreds]} Hundred` 
      : `${ones[hundreds]} Hundred ${remainderWords}`;
  } else if (number >= 1000 && number <= 9999) {
    const thousands = Math.floor(number / 1000);
    const remainder = number % 1000;
    let remainderWords = "";

    if (remainder >= 100) {
      const hundreds = Math.floor(remainder / 100);
      const twoDigitRemainder = remainder % 100;
      const twoDigitWords = convertTwoDigits(twoDigitRemainder);
      remainderWords = twoDigitRemainder === 0 
        ? `${ones[hundreds]} Hundred` 
        : `${ones[hundreds]} Hundred ${twoDigitWords}`;
    } else if (remainder > 0) {
      remainderWords = convertTwoDigits(remainder);
    }

    words = remainder === 0 
      ? `${ones[thousands]} Thousand` 
      : `${ones[thousands]} Thousand ${remainderWords}`;
  } else {
    words = "Number out of range.";
  }

  // 去除多余空格
  text.value = words.trim();
});

修复说明 #

1. 新增convertTwoDigits工具函数：统一处理0-99的数字转换，自动识别10-19的特殊情况，避免重复逻辑；
2. 三位数逻辑简化：计算百位后的余数，直接调用工具函数处理，解决111-119的undefined问题；
3. 四位数逻辑优化：
   • 千位后余数小于100时，直接调用工具函数转换，不拼接Hundred部分，解决1001的多余内容问题；
   • 余数为10-19时，通过工具函数正确转换，解决1011-1019的格式错误；
4. 去除多余空格：用trim()避免空字符串拼接产生的无效空格。

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