We believe that in the front-end development process often encounter the need to display the context, such as:

In Vue we can use v-for to process the list data to display such a list, but we can only get [0,1,2,3,4] by Index. Obviously we need the interface sequence number to start with 1, so we need to add Index +1 to get [1,2,3,4]. These numbers are only used for section numbers. How can we implement “one, two, three” in the chapter?

1. Convert to MATH type text

For relatively simple requirements, which means that this course has up to ten chapters, that’s easy, we’ll just use an array to put “one, two, three…” Save it and use index as array index to fetch it. There are only two lines of code:

js

const idxArray = ['一'.'二'.'三'.'four'.'five'.'六'.'seven'.'eight'.'九'.'ten'];
Copy the code

html

<div v-for="(item,index) in catalogData"> <span> <span> {{idxArray[index]}} {{item.coursechaptertitle}}</span> </div>Copy the code

This is only the simplest case, but also the most limited case. What if we go beyond ten chapters? Undefined, so we need a method that can convert all lowercase numbers:

js

const numberChinese = (number) => {
  var units = 'Ten million @#% billion ^&~', chars = One, two, three, four, five, six, seven, eight, nine.;
  var a = (number + ' ').split(' '), s = []
  if (a.length > 12) {
    throw new Error('too big');
  } else {
    for (var i = 0, j = a.length - 1; i <= j; i++) {
      if(j = = 1 | | j = = | | j = = 9) {/ / double-digit handling special 1 *if (i == 0) {
          if(a[i] ! ='1') s.push(chars.charAt(a[i]));
        } else{ s.push(chars.charAt(a[i])); }}else {
        s.push(chars.charAt(a[i]));
      }
      if(i ! = j) { s.push(units.charAt(j - i)); / /}}}return s;
  return s.join(' ').replace(/ zero ([ten quadrillion @Function (m, d, b) {// function (m, d, b)
    b = units.indexOf(d);
    if (b != -1) {
      if (d == '亿') return d;
      if (d == '万') return d;
      if (a[j - b] == '0') return 'zero'
    }
    return ' '; }). Replace (/ zero + / g,'zero').replace(/ zero ([trillion])/g,function(m, b) {// after zero hundred thousand processing, there may be zero zero reprocessingreturnb; }).replace(/ hundreds of millions /g,'亿'). The replace ([0] $/,' ').replace(/[@#%^&~]/g, function (m) {
    return { The '@': 'ten'.The '#': 'best'.The '%': '千'.A '^': 'ten'.'&': 'best'.'~': '千'}[m]; }).replace(/([billions])([one-nine])/g,function (m, d, b, c) {
    c = units.indexOf(d);
    if (c != -1) {
      if (a[j - c] == '0') return d + 'zero' + b
    }
    return m;
  });
}
Copy the code

html

<div v-for="(item,index) in catalogData"> <span> {{item.coursechaptertitle}}</span> </div>Copy the code

In this case, we passed in 123, after calling the method, will output 123, can be a good expression of our 123 chapter, no matter how many chapters you are can be very good conversion!

2. Convert it to the number type

For programmers, requirements are always changing, and you never know which one your product manager will ask you to change next. In this case, you get “123”, but you need to show the user “one, two, three”, using the above method is not possible, so what should we do? This situation relative to the above, much simpler, we just need to do this can be a perfect solution (most of the program ape will think of such a method, if you did not think of, that you have a lot of room for progress in JS) :

js

  function numberChinese(number){
    const strNumber = number.toString();
    const len = strNumber.length;
    let numberCh = "";
    for(leti=0; i<len; i++){let currentNum = strNumber.substr(i,1);
     switch (currentNum) {
        case '0':
          numberCh += 'zero';
          break;
        case '1':
          numberCh += '一';
          break;
        case '2':
          numberCh += '二';
          break;
        case '3':
          numberCh += '三';
          break;
        case '4':
          numberCh += 'four';
          break;
        case '5':
          numberCh += 'five';
          break;
        case '6':
          numberCh += '六';
          break;
        case '7':
          numberCh += 'seven';
          break;
        case '8':
          numberCh += 'eight';
          break;
        case '9':
          numberCh += '九';
          break;
        default:
          numberCh += The '*'; }}return numberCh;
  }
Copy the code

html

{{numberChinese(number)}} </div>Copy the code

So the number 12345 can be converted to one, two, three, four, five, and you think that’s perfect? No,no,no. Don’t you think it’s too complicated? So long code to achieve such a small transformation function, heart tired, please do not blink, we will replace the above forty lines of code with one line of code:

(123456789).toLocaleString('zh-hans-CN-u-nu-hanidec',{useGrouping:false/ /})"One, two, three, four, five, six, eight, nine"
Copy the code

Do you want to cry? It could be that simple! UseGrouping returns false or true.

See W3School for the method of toLocaleString, and MDN is recommended for the specific configuration methods in brackets!

That’s it! Please give us more advice!