Question

我想在数字之间放置空格-例如600000-> 600000。

我所做的：

HTML：

  <h2>{{price.spaces(item.price)}}€</h2>

TS：

 spaces(price){
    let p = new String(price);
    if(p.length == 4){
      p.split("", 4);
       p = p[0] + ' ' + p[1]  + p[2]  + p[3];

     }

    if(p.length == 5){
      p.split("", 5);
       p = p[0] + p[1] + ' ' + p[2]  + p[3] + p[4];
     }

 if(p.length == 6){
  p.split("", 6);
   p = p[0] + p[1] + p[2] + ' ' + p[3] + p[4] + p[5];
 }

 //if(p.length == 7){
  //p.split("", 7);
   //p = p[0] + ' ' + p[1] + p[2] + p[3] + ' ' + p[4] + p[5] + p[6];
 //}
 return p;
  }

预期的行为：

如果长度为4-1 000
如果长度为5-10000
如果长度为6-100 000
如果长度为7-1000000

我的功能结果：

它通常算作length －例如，如果600000（6 length）占if(p.length == 6)，然后它占if(p.length == 7)，因为在{{ 1}}变成 7个空格。

如何改善我的功能？

Answer 1

一种选择是使用正则表达式：标识字符串中的每个位置，使得3位或6位或9位等，然后在字符串的末尾跟随

const spaces = price => String(price)
  .replace(
    /(?!^)(?=(?:\d{3})+$)/g,
    ' '
  );

for (let i = 1; i < 1e10; i *= 10) {
  console.log(spaces(i));
}

(?!^)(?=(?:\d{3})+$)的意思是：

(?!^)-^的负向前-确保此位置不是字符串的开头
(?=(?:\d{3})+$)-积极展望：
- (?:\d{3})+-数字字符重复了3次
- $-字符串末尾

Answer 2

我创建了一个自定义的Angular管道来管理和显示带有空格的数字。

目标是提供一种通用方法，该方法能够转换一个输入（一个数字）并将其转换成我想要的内容（一个格式化的数字）。角管已制成，并且可以很好地做到这一点。

这里是一个示例，您可以从中激发灵感，只取想要的东西。

我使用欧几里得除法来管理任何长度的数字。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'formatNumber'
})
export class FormatNumberPipe implements PipeTransform {

  transform(value: any): string {
    if (value) {
      // Gets the value as a string
      if (typeof value !== 'string') {
        value = value.toString();
      }
      // Delete existing spaces
      while ((value as string).indexOf(' ') !== -1) {
        value = (value as string).replace(' ', '');
      }

      // Manage decimal values
      let integerPart: string = value;
      if (value.indexOf('.') !== -1) {
        integerPart = value.slice(0, value.indexOf('.'));
      }
      if (value.indexOf(',') !== -1) {
        integerPart = value.slice(0, value.indexOf(','));
      }

      let firstSlice = true;
      const arrayResults: Array<string> = [];
      let finalResult = '';

      const divisor = 3;
      const dividend: number = integerPart.length;
      let remainder = dividend % divisor;
      let quotient = (dividend + remainder) / divisor;

      if (dividend >= 3) {
        do {
          if (firstSlice && remainder > 0) {
            // Manage numbers with remainders
            firstSlice = false;
            arrayResults.push(integerPart.slice(0, remainder));
          } else {
            // Slice each part of the number to an array
            firstSlice = false;
            arrayResults.push(integerPart.slice(remainder, remainder + divisor));
            remainder = remainder + divisor;
            quotient--;
          }
          // Continue dividing the number while there are values
        } while (quotient >= 1);

        // Concats the sliced parts to build the final number
        arrayResults.forEach(part => {
          finalResult += `${part} `;
        });
        // Delete any trailing whitespace
        finalResult = finalResult.trim();
        return finalResult;
      } else {
        return value;
      }
    }
    return value;
  }
}

管道完成后，您可以在应用程序中随意使用它：

直接在您的模板中：

<input [ngModel]="value | formatNumber" (ngModelChange)="value = $event">

或者在代码中直接使用管道的依赖注入：

this.sommeFormat.totalValue = this.formatNumber.transform(this.somme.totalValue);

以下是有关Angular管道的官方文档：https://angular.io/guide/pipes

角度2根据数字长度在数字之间放置空格

2 个答案: