Как преобразовать число 123 в текст верхнего регистра 123 или 123?

внешний интерфейс JavaScript

Я полагаю, что вы часто сталкиваетесь с ситуациями, когда вам нужно отобразить назначение глав в процессе разработки интерфейса, например:

существуетVueв мы можем использоватьv-forОбработка данных списка показывает такой список, но мы можем передать толькоIndexполучать[0,1,2,3,4], очевидно, серийный номер нужного нам интерфейса начинается с 1, поэтому нам нужно установитьindex+1может получить[1,2,3,4],ЭтиnumberСерийный номер типа используется только для серийного номера подраздела,"раз два три"Как мы можем этого достичь?


1. Преобразование в текст типа MATH

Для каких-то относительно простых нужд, то есть в этом курсе больше десяти глав, то очень просто.Мы используем массив для сохранения этих "раз, два, три....", в качестве индекса массива используем пройденный индекс Go Взять это! Конкретный код реализации состоит из двух строк:

js

const idxArray = ['一','二','三','四','五','六','七','八','九','十'];

html

<div v-for="(item,index) in catalogData">
    <span>第{{idxArray[index]}}章: {{item.courseChapterTitle}}</span>
</div>

Это только самый простой случай и самый предельный случай, а что, если он превышает десять глав? появится undefined, поэтому нам нужен метод, преобразующий все строчные числа:

js

const numberChinese = (number) => {
  var units = '个十百千万@#%亿^&~', chars = '零一二三四五六七八九';
  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 == 5 || j == 9) {//两位数 处理特殊的 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(/零([十百千万亿@#%^&~])/g, 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 '零'
    }
    return '';
  }).replace(/零+/g, '零').replace(/零([万亿])/g, function (m, b) {// 零百 零千处理后 可能出现 零零相连的 再处理结尾为零的
    return b;
  }).replace(/亿[万千百]/g, '亿').replace(/[零]$/, '').replace(/[@#%^&~]/g, function (m) {
    return { '@': '十', '#': '百', '%': '千', '^': '十', '&': '百', '~': '千' }[m];
  }).replace(/([亿万])([一-九])/g, function (m, d, b, c) {
    c = units.indexOf(d);
    if (c != -1) {
      if (a[j - c] == '0') return d + '零' + b
    }
    return m;
  });
}

html

<div v-for="(item,index) in catalogData">
    <span>第{{numberChinese(index+1)}}章: {{item.courseChapterTitle}}</span>
</div>

В этом случае добавление того, что мы передаем,123, после вызова метода выведетСто двадцать три, может выразить нашеГлава 123, независимо от того, сколько глав у вас есть, вы можете хорошо преобразовать его!

2. Преобразовать в текст типа number

Для программистов требования постоянно меняются, и вы никогда не угадаете, какое требование ваш менеджер по продукту попросит вас изменить в следующую секунду. В таком случае вы получите "123", но вам нужно показать пользователю "123". Вышеупомянутый метод невозможен, так что же нам делать? По сравнению с вышеописанной, эта ситуация намного проще, нам просто нужно сделать это, чтобы решить ее идеально (большинство программистов додумаются до такого способа, если вы не додумаетесь, значит, у вас еще много js возможности для совершенствования):

js

  function numberChinese(number){
    const strNumber = number.toString();
    const len = strNumber.length;
    let numberCh = "";
    for(let i=0;i<len;i++){
     let currentNum = strNumber.substr(i,1);
     switch (currentNum) {
        case '0':
          numberCh += '零';
          break;
        case '1':
          numberCh += '一';
          break;
        case '2':
          numberCh += '二';
          break;
        case '3':
          numberCh += '三';
          break;
        case '4':
          numberCh += '四';
          break;
        case '5':
          numberCh += '五';
          break;
        case '6':
          numberCh += '六';
          break;
        case '7':
          numberCh += '七';
          break;
        case '8':
          numberCh += '八';
          break;
        case '9':
          numberCh += '九';
          break;
        default:
          numberCh += '*';
      }
    }
    return numberCh;
  }

html

<div>
    {{number}}的大写数字为:{{numberChinese(number)}}
</div>

Просто соус фиолетовый, цифровой12345может быть преобразован враз, два, три, четыре, пятьКак вы думаете, это идеально? нет, нет, нет, не кажется ли вам, что это слишком сложно писать так? Утомительно использовать такой длинный код для реализации такой маленькой функции преобразования. Пожалуйста, не моргайте, мы заменим приведенные выше сорок строк на одна строка кода Код:

(123456789).toLocaleString('zh-hans-CN-u-nu-hanidec',{useGrouping:false}) //"一二三四五六七八九"

Хочешь плакать? Оказывается, это может быть так просто!
useGroupingБудь то входящее false или true, возвращаемое значение имеет некоторые изменения!

toLocaleStringметод см.w3school, конкретные методы настройки в скобках рекомендуется посмотретьПодробное объяснение MDN!

Вот и все! Пожалуйста, дайте нам еще совет!

Категории