Header Ads Widget

Ticker

6/recent/ticker-posts

Convertir cadena en número / matriz en JavaScript con React Hooks / ejemplos de Vue.JS

 En este tutorial, aprenderemos con un ejemplo cómo convertir una cadena en el número entero o flotante correspondiente o en una matriz de números utilizando los métodos de JavaScript integrados con ejemplos simples de React y Vue.js.

Primero, comenzaremos por comprender los métodos y trucos utilizados para convertir cadenas en números enteros y flotantes, o en una matriz de números y, finalmente, veremos ejemplos prácticos con aplicaciones simples React, React Hooks y Vue.JS.

Al pasar accesorios de React a componentes, que esperan valores numéricos, en la forma en que asignamos propiedades HTML regulares, es decir, usando las "comillas, la conversión de cadena a número es una de las posibles formas en que pasamos los valores precisos además de usar tipos de accesorios o pasar accesorios a través de llaves. . Lo veremos con un ejemplo más adelante en el artículo.

JavaScript ' parseInt()yparseFloat()

JavaScript proporciona dos métodos integrados para convertir una cadena en un número entero o flotante siempre que la cadena contenga un número entero o flotante válido. Los dos métodos son parseInt()parseFloat().

Sin embargo, los desarrolladores han recurrido al uso de otros trucos y técnicas, además de las técnicas integradas, por razones de rendimiento.

Cómo convertir cadenas en números en JavaScript

Comencemos con un ejemplo simple de JavaScript para demostrar cómo convertir una cadena de JavaScript en un número.

Regrese a su interfaz de línea de comandos y cree un archivo llamado convert.js, ábralo y agregue el siguiente código:

const num = Number('2020');
console.log(num);

A continuación, regrese a la terminal y ejecute el convert.jsscript con el nodo si lo tiene instalado en su máquina de desarrollo:

node convert.js

Si no tiene un nodo instalado en su sistema, también puede usar su navegador para ejecutar este código. Simplemente vaya a DevTools y escriba el código en la consola y presione Enter para ejecutarlo.

Numberes un objeto JS que puede envolver otros objetos y proporciona muchos métodos integrados. No use el constructor, es decir, new Number("2020")ya que este devolverá un objeto Número en lugar de un valor numérico.

Convertir una cadena en un entero usando parseInt()

JavaScript tiene un parseInt()método integrado que convierte una cadena en un número entero correspondiente. Se necesitan dos argumentos. El primer argumento es la cadena a convertir y el segundo argumento es la base numérica.

Regrese al convert.jsarchivo y agregue el siguiente código:

let year = "2020";
let iyear = parseInt(year, 10);
console.log(iyear);//2020

El parseInt()método toma dos argumentos, el primer argumento es la cadena para analizar a un número entero y el segundo argumento es la base o la base numérica, si no está familiarizado con esta noción matemática, simplemente use la base diez para convertir el número a la formato utilizado por los humanos para realizar cálculos. También existen otras bases comunes como el 2 para los sistemas binarios utilizados por los ordenadores o el 16 para el sistema hexadecimal también utilizado mayoritariamente en herramientas informáticas.

Convertir una cadena en flotante usando parseFloat()

JavaScript tiene otro método incorporado llamado parseFloat()que convierte una cadena en un número flotante:

const pieStr = "3.14";
typeof pieStr
"string"
const pie = parseFloat(pieStr, 10);
typeof pie
"number"

Este método analizará la cadena en un número flotante en el sistema numérico de base 10.

Los desarrolladores utilizan con frecuencia estos dos métodos para convertir cadenas de JavaScript en números enteros y flotantes que son suficientes para ejemplos de código simples pero para aplicaciones completas, particularmente aquellas que necesitan beneficiarse de cada bit de rendimiento disponible (y, francamente, qué aplicación no requiere mejor rendimiento ...), los desarrolladores recurren a otros trucos con algunos operadores JS que no fueron diseñados para el primer lugar para la conversión de tipos.

Convertir una cadena en un número usando el +operador unario

También puede hacer uso del operador unario o +antes de una cadena para convertirlo en un número, pero la cadena solo debe contener caracteres numéricos. Por ejemplo:

let result = +"2020";
typeof  result
"number"

Como puede ver cuando usa el operador unario más con una cadena JS, el resultado es un número.

Usando el Math.floor()método

Al igual que el +operador unario, el integrado Math.floor()se puede utilizar para convertir una cadena en un número entero. Por ejemplo:

let result = Math.floor("2020.1");
console.log(result); // 2020

A diferencia del operador más unario, si pasa un número flotante, se convertirá en un entero, así que utilícelo solo cuando este sea el comportamiento deseado.

Usando * 1, multiplicando por uno

También puede multiplicar una cadena por uno para convertirla en un número. Este también tiene la ventaja de ser uno de los métodos más rápidos en JavaScript. Es similar al +operador unario, ya que no realiza la conversión a un número entero si el número es un flotante.

'10.0' * 1 //10 ✅
'10.20' * 1 //10.2 ✅
'10.33' * 1 //10.33 ✅
'10000' * 1 //10000 ✅

También hay muchos otros métodos para convertir una cadena en un número en JavaScript, como:

~~num //bitwise not
num / 1 // diving by one
num - 0 // minus 0

¿Cuál es el método preferido?

Muchos desarrolladores prefieren usar el Numberobjeto, sin la newpalabra clave (que crea un nuevo objeto JavaScript en lugar de devolver un valor)

const result = Number('2020') //2020

Esto también funciona para flotadores.

Actuación

Todos estos métodos son utilizados por los desarrolladores, pero cada uno es diferente en términos de rendimiento en diferentes entornos, dependiendo de la implementación.

En general, * 1muchos desarrolladores lo consideran el mejor para el rendimiento. el ganador en cuanto a rendimiento 10 veces más rápido que otras alternativas.

Convertir una cadena de JavaScript en una matriz de números

Veamos ahora un pequeño ejemplo avanzado al convertir una matriz JS de cadenas en números utilizando uno de los métodos anteriores.

Tomemos la siguiente cadena:

const numbersStr = "1,2,3,4,5";

¿Cómo convertir esta cadena en una matriz JS de los números correspondientes?

Primero, necesitamos llamar a la cadena en una matriz de múltiples cadenas usando la coma como separador:

const numbersArr = numbersStr.split(',');

El resultado será:

["1", "2", "3", "4", "5"]

A continuación, podemos iterar sobre esta matriz y convertir cada cadena en un número:

const numbers = numbersArr.map((n) => {
    return parseInt(n, 10);
});

También podemos crear un código más compacto de la siguiente manera:

const nums = "1,2,3,4,5".split(',').map( n => parseInt(n, 10))

La cadena se convierte en una matriz, luego, usando el Array.mapmétodo JS , asignamos cada valor con una función de flecha que devuelve el equivalente entero de la cadena.

Para aumentar el rendimiento y escribir un código más corto, podemos convertir la cadena en un número usando los otros trucos de conversión, como el operador unario más:

const nums = "1,2,3,4,5".split(',').map(n => +n)

También podemos usar el método Array.from de la siguiente manera:

var numStr = "1,2,3,4,5";
var nums = Array.from(numStr.split(','),Number);

El Array.from()método crea una nueva Arrayinstancia copiada superficialmente a partir de un objeto iterable o similar a una matriz.

El primer argumento es una matriz JS creada al dividir la cadena original en una matriz de cadenas y el segundo argumento es una función de mapa que se aplicará a cada elemento de la matriz, convirtiéndolo en un número envolviéndolo con Number, dando como resultado un nuevo matriz de números.

La segunda línea es simplemente la abreviatura de:

var nums = Array.from(numStr.split(','),(n) => Number(n)); 

Conversión de cadena de JavaScript a número en Vue.JS

Ahora que hemos visto cómo realizar conversiones de cadena a número en JS, veamos cómo aplicar esos casos concretos cuando se trabaja con bibliotecas populares de JS como React o Vue.JS

Supongamos que tenemos los siguientes datos JSON que se devolverán desde una API REST:

{
  "products": [
    {
      "id": 1,
      "productName": "P01",
      "price": "114.00"
    },
    {
      "id": 2,
      "productName": "P02",
      "price": "333.00"
    },
    {
      "id": 3,
      "productName": "P03",
      "price": "743.00"
    },
    {
      "id": 4,
      "productName": "P04",
      "price": "449.00"
    }
  ]
}

En nuestra aplicación Vue.js o React, podemos obtener y consumir estos datos JSON de nuestro servidor remoto utilizando la API Fetch o un cliente HTTP como Axios. Luego, queremos convertir los precios de los productos a números de cadenas.

Aquí está nuestra función de JavaScript:

const fetchProducts = () => {

  axios({
    method: 'GET',
    url: '/api'
  })
    .then(response => {
      this.products = response.data.products
      for (let i = 0; i < this.products.length; i++) {
        this.products[i].price = 1*this.products[i].price;
      }
    })
};

Esta es la aplicación Vue.js:

let newApp = new Vue({  
    el: ‘#app,  
    data: {  
    products: []
    },  
    methods: {  
    fetchProducts: fetchProducts,  
    created: function() {  
        this.fetchProducts();  
    }  
})

Pasar accesorios como cadenas en lugar de números: ejemplo de React Hooks con JS parseIntparseFloatmétodos

Cuando trabaje con React, principalmente necesitará pasar accesorios a componentes que se pueden hacer de varias maneras. Por ejemplo, usando la forma HTML normal, es decir:

<MyComponent value="2" />

Esto pasará el valueprop como una cadena, no como un número, incluso si queremos usar el último tipo debido a lo que esperaría el componente.

Existen múltiples soluciones para esto. Si necesita el valor de prop como un número, simplemente necesita usar la cadena para numerar los trucos de conversión y las API que hemos visto en el artículo, como parseInt().

También puede usar llaves al pasar el accesorio:

<MyComponent value={2} />

También puede hacer uso de React Prop Types para definir qué tipo de datos de una propiedad en un componente React debería ser.

Este es un componente React simple con ganchos que convierte los accesorios de cadena, que se le pasarían desde un componente principal, en números antes de trabajar con sus valores:

import React from 'react';

export const TimerComponent = ({ hours = 0, minutes = 0, seconds = 0 }) => {
  const [paused, setPaused] = React.useState(false);
  const [finished, setFinished] = React.useState(false);
  const [time, setTime] = React.useState({
    hours: parseInt(hours, 10),
    minutes: parseInt(minutes, 10),
    seconds: parseInt(seconds, 10)
  });

  const tick = () => {
    if (paused || finished) return;

    // Time up
    if (time.hours === 0 && time.minutes === 0 && time.seconds === 0) {
      setFinished(true);
    } else if (time.minutes === 0 && time.seconds === 0) {

      setTime({
        hours: time.hours - 1,
        minutes: 59,
        seconds: 59
      });
    } else if (time.seconds === 0) {

      setTime({
        hours: time.hours,
        minutes: time.minutes - 1,
        seconds: 59
      });
    } else {

      setTime({
        hours: time.hours,
        minutes: time.minutes,
        seconds: time.seconds - 1
      });
    }
  };

  React.useEffect(() => {
    let timerID = setInterval(() => tick(), 1000);

    return () => clearInterval(timerID);

  });

  return (
    <div>
      <p>
        {`${time.hours.toString()}:${time.minutes.toString()}:${time.seconds.toString()}`}
      </p>
      <p>{finished ? "This is time!" : ''}</p>
    </div>
  );
};

Este componente de React espera los accesorios hoursminutessecondsque deberían ser números, por lo que podría ser una buena idea analizar estos accesorios en números, independientemente de cómo el padre pase estos valores.

Conclusión

En este artículo, hemos visto cómo podemos convertir cadenas en números en JavaScript, que es una operación común cuando se escribe código JS.

Hemos visto que JavaScript proporciona muchos trucos y API incorporadas para convertir un número en su cadena equivalente, como los métodos incorporados parseIntparseFloat, y también multiplicar, dividir por uno o usar el operador unario más antes de la variable de cadena.

La mayoría de los desarrolladores encuentran que los últimos trucos son mejores en términos de rendimiento que los métodos incorporados parseIntparseFloat.

También hemos visto un ejemplo de conversión de una cadena en una matriz de números usando los trucos de conversión con métodos JS como Array.mapArray.fromsplit.

Finalmente, hemos visto cómo usar la conversión de cadenas a números con casos del mundo real al crear aplicaciones con bibliotecas populares de JavaScript como React (React Hooks) y Vue.js.

Publicar un comentario

0 Comentarios