How do I convert numbers to English in a form?

1. Use background

If the built application involves some external orders, the value must be expressed in English. You can refer to this document to convert the value to English.

2. Procedure

2.1 Step 1: Page design

Create a form page and drag a numeric component and a single-line text component.

Figure 2.1-1 page design

2.2 Step 2: bind values onchange actions

The numeric component binds onchange actions and writes code in the pop-up JS panel.

Figure 2.2-1 binding action

Figure 2.2-2 write relevant code

The following code can be directly copied in the JS panel,Note: You need to replace the unique identifier of the component.

export function onChange({ value }) {
  console.log("value", value)
  //替换为单行文本组件的唯一标识
  this.$("textField_kvvsk0t1").setValue(numberToWords(value))
}

var numberToWords = function (num) {
  // 1到19
  const unitObj = {
    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"
  }
  // 20, 30 ~ 90
  const tenObj = {
    2: " Twenty",
    3: " Thirty",
    4: " Forty",
    5: " Fifty",
    6: " Sixty",
    7: " Seventy",
    8: " Eighty",
    9: " Ninety"
  }
  // 数字大小限制为Billion级别，所以只需要以下几个就行了
  const unitAry = ["", " Thousand", " Million", " Billion"];
  // 这个数决定选取当前的数字块后面加的单位
  let count = 0;
  let str = "";
  if (num === 0) return "Zero";

  if (num < 0) {
    num = Math.abs(num);
    // 将数字按照3位分割 分割后的数字 除了后面附带的单位不一样，其他的都相同处理方法
    while (num > 0) {
      const newNum = num % 1000;
      const newNumStr = convertNumToStr(newNum);
      str = (newNumStr === "" ? "" : (newNumStr + unitAry[count])) + (str === "" ? "" : (" " + str));
      num = parseInt(num / 1000);
      count++;
    }
    return "Minus " +str.replace(/s{2,}/g, " ");
  }else{
    // 将数字按照3位分割 分割后的数字 除了后面附带的单位不一样，其他的都相同处理方法
    while (num > 0) {
      const newNum = num % 1000;
      const newNumStr = convertNumToStr(newNum);
      str = (newNumStr === "" ? "" : (newNumStr + unitAry[count])) + (str === "" ? "" : (" " + str));
      num = parseInt(num / 1000);
      count++;
    }
    return str.replace(/s{2,}/g, " ");
  }

  function convertNumToStr(num) {
    let str = "";
    const n1 = parseInt(num / 100);
    if (n1 > 0) {
      str += unitObj[n1] + " Hundred";
    }
    let n2 = num % 100;
    if (n2 > 19) {
      const tenCount = parseInt(n2 / 10);
      const geCount = n2 % 10;
      str += tenObj[tenCount];
      if (geCount > 0) {
        str += unitObj[geCount];
      }
    } else if (n2 > 0) {
      str += unitObj[n2];
    }
    return str.trim();
  }
};

3. Effect demonstration

Click the form to view the implementation effect directly:Click View

Figure 3-1 effect demonstration

4. Try it online

https://www.aliwork.com/bench/coe? tplUuid=TPL_PU5YTWOM9JZ9ZVYBDLFG

YIDA in order to better optimize the content and quality of YIDA user manual, it takes you 3-5 minutes to fill in the document feedback questionnaire. The document feedback questionnaire is submitted anonymously, and the questionnaire information is only used for YIDA document experience feedback collection. Thank you for your support for YIDA!

Click this link to fill in the questionnaire