Utilice un separador de miles (coma) para representar números grandes en páginas web

Expresar una cadena de números en miles de formas separadas: la aplicación de expresiones regulares JS

Un caso

Cómo convertir una cadena de números enteros en miles separados, como 10000000000, en 10,000,000,000.

Antes de entender las expresiones regulares, si quieres realizar esta función, no importa la cantidad de código o el grado de quema de cerebro, es muy enloquecedor, pero si usas expresiones regulares para resolverlo, se pueden hacer dos o tres líneas de código. ! Hacer coincidir y reemplazar cadenas que se ajustan a ciertas reglas es precisamente la fuerza de las expresiones regulares.

Expresión regular

##### Expresiones regulares de concepto, también conocidas como expresiones regulares. (Inglés: expresión regular, a menudo abreviada como regex, regexp o RE en el código), un concepto de informática. No es solo algo exclusivo de Javascript. Puede ver el elegante baile de las expresiones regulares en la mayoría de los sistemas operativos convencionales, lenguajes de desarrollo convencionales e innumerables aplicaciones de software. La expresión regular es una especie de fórmula lógica para la manipulación de cadenas. Utiliza algunos caracteres específicos predefinidos y la combinación de estos caracteres específicos para formar una "cadena de reglas". Esta "cadena de reglas" se utiliza para expresar el par de caracteres. A tipo de lógica de filtrado para cadenas. #####Características

  1. Muy flexible, lógico y funcional
  2. El complejo control de la cadena de caracteres se puede lograr rápidamente de una manera muy sencilla.
  3. Para aquellos que son nuevos en él, es más oscuro y difícil de entender.

Este artículo solo analiza algunos métodos comunes e importantes de expresiones regulares compatibles con Javascript al resolver los casos anteriores. Si desea consultar todas las funciones poderosas de las expresiones regulares en Javascript, haga clic aquí Objeto JavaScript RegExp para ver el documento oficial de W3school.

Clasificar ideas

Lo primero que hay que entender es que el formato numérico que vamos a convertir es así: contando desde el dígito de las unidades hacia la izquierda, insertando un separador de mil antes de ,cada tres dígitos, puedes imaginar que queremos poner el espacio vacío al frente de cada tres dígitos ""Combínelo y reemplácelo con un separador de miles ,. El número de dígitos después de cada separador de miles es 3 o un múltiplo de 3.

Escritura de código

Cree un literal de expresión regular y agregue el modificador de coincidencia global g. var reg = //g;La interpretación del W3C de la coincidencia global es encontrar todas las coincidencias en lugar de detenerse después de encontrar la primera coincidencia.

Debido a que debe coincidir de derecha a izquierda, $se requiere el final . Tres dígitos solían \d{3}representar, porque no sabemos cuántos conjuntos de ese número de tres dígitos, por lo que es necesario \d{3}seguido de +, para representar coincidencias con cualquier cadena que contenga al menos un conjunto de tres dígitos. Hasta ahora, /(\d{3})+$/gsignifica 3 o un múltiplo de 3 números al final.

Dado que el reemplazo es el que está inmediatamente antes de cada tres dígitos (desde el final) "", se necesita una búsqueda hacia adelante, es decir, ?=n(coincida con cualquier cadena que siga inmediatamente a la cadena n especificada). ¿Cómo utilizar la comprobación previa positiva? Aquí hay un ejemplo: hay una cadena var str = "abaaaaa";, queremos representar el carácter a seguido del carácter b, por lo que la expresión regular se escribe :, el carácter que var reg = /a(?=b)/g;sigue al carácter coincide , y solo hay uno en la cadena que cumple las condiciones , y finalmente verifique el resultado coincidente como ["a"]. El código de este ejemplo es el siguiente:bastra

var str = "abaaaaa",
    reg = /a(?=b)/g;
console.log(str.match(reg));
复制代码

Después de una comprensión aproximada de la pre-investigación positiva, volviendo al caso original, podemos escribirlo /(?=(\d{3})+$)/g;, ¿por qué (?=...)no escribimos nada antes? Porque lo que buscamos son los que van seguidos de tres dígitos "", claro que no es necesario escribir nada. Vamos a comprobar, ¿hay tres coincidencias ""?

var str = "10000000000",
    reg = /(?=(\d{3})+$)/g;
console.log(str.match(reg));
复制代码

El resultado es el siguiente, realmente tres "".

 

A continuación, reemplazamos estos tres espacios:

 

var str = "10000000000",
    reg = /(?=(\d{3})+$)/g;
console.log(str.replace(reg, ","));
复制代码

El resultado es el siguiente, la conversión es exitosa.

 

 

Pero, aún no ha terminado ... Ahora es un número de once dígitos. Si agrega un cero para hacer hasta doce dígitos, es un múltiplo de 3. Probémoslo:

var str = "100000000000",
    reg = /(?=(\d{3})+$)/g;
console.log(str.replace(reg, ","));
复制代码

El resultado se convirtió en este:

 

También se agrega uno al principio de esta serie de números ,. Esta razón no se explicará, debe comprender por qué. Entonces, ¿cómo solucionarlo? Mejoremos el código y \dagreguemos un límite sin palabras al frente \Bpara indicar que el espacio coincidente no puede ser seguido por un límite de palabras, de modo que el frente se pueda ,eliminar. El código final es el siguiente

 

var str = "100000000000",
    reg = /(?=(\B\d{3})+$)/g;
console.log(str.replace(reg, ","));
复制代码

 

 

 

para resumir

En resumen, se acabó el caso de "convertir una cadena de números enteros en forma separada por miles". Permítanme aclarar algunos de los puntos de conocimiento utilizados en este caso.

  • gEs un modificador que representa una coincidencia global, lo que significa encontrar todas las coincidencias en lugar de detenerse después de encontrar la primera coincidencia.
  • $Es un cuantificador que indica el final, por ejemplo n$, coincide con cualquier cadena que termine en n.
  • \dEs un metacarácter para encontrar un número.
  • n{X}Es un cuantificador que coincide con una cadena que contiene X secuencias de n.
  • n+Es un cuantificador que coincide con cualquier cadena que contenga al menos una n.
  • ?=nLa búsqueda hacia adelante se utiliza para hacer coincidir cualquier cadena de caracteres inmediatamente después de la cadena de caracteres especificada n.
  • match() El método del objeto String se utiliza para encontrar una o más coincidencias de expresiones regulares.
  • replace()El método del objeto String es reemplazar la subcadena que coincide con la expresión regular.
  • \BEs un metacarácter que coincide con un límite que no es una palabra, y el metacarácter que es complementario entre sí es un metacarácter \bque coincide con un límite de una palabra.

Reimpreso en https://juejin.im/post/5abb5b01f265da237f1e5a92

Método dos:

Método dos: usa el toLocaleString()método

La sintaxis es la siguiente:

Number.toLocaleString ('en-US');

Por ejemplo:

(123456789) .toLocaleString ('en-US');

El resultado es: 123.456.789

Para el escenario chino, toLocaleString('en-US')en 'en-US'teoría se puede incumplir, es decir, (123456789).toLocaleString()puede obtener 123,456,789 directamente . Pero si su producto puede ser utilizado por usuarios extranjeros, aún está reservado para el seguro 'en-US'.

Además, para la versión anterior de IE edge Number.toLocaleString(), se agregarán automáticamente dos decimales.Si no es necesario, debe filtrarlo usted mismo.

Supongo que te gusta

Origin blog.csdn.net/qq_36818077/article/details/84139073
Recomendado
Clasificación