7 Funciones De Utilidad En JavaScript Para Mejorar Su Eficiencia

JavaScript

Detectar el navegador

Diferentes navegadores tienen diferentes navigator.useragent. Podemos detectar los tipos de navegadores comprobando este valor.

Resultado en Google Chrome.

Resultado en Firefox.

Así que solo tenemos que comprobar si hay una marca del navegador en navigator.useragent, y entonces podremos detectar el tipo de navegador.

const inBrowser = typeof window !== 'undefined'

// get user agent
const UA = inBrowser && window.navigator.userAgent.toLowerCase()

// detect browser
const isIE = UA && /msie|trident/.test(UA)
const isIE9 = UA && UA.indexOf('msie 9.0') > 0
const isEdge = UA && UA.indexOf('edge/') > 0
const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge
const isPhantomJS = UA && /phantomjs/.test(UA)
const isFF = UA && UA.match(/firefox\/(\d+)/)

// detect OS
const isAndroid = UA && UA.indexOf('android') > 0
const isIOS = UA && /iphone|ipad|ipod|ios/.test(UA)

¡Aprende JavaScript con mi nuevo curso!

 

Detectar el tipo de función

Hay dos tipos de funciones:

  • Funciones nativas proporcionadas por el entorno de ejecución. Por ejemplo Array.isArray , console.log, etc…
     
  • Funciones escritas por los usuarios.

En algunos casos complejos, tal vez sea necesario diferenciar entre estos dos tipos de funciones.

Entonces, ¿cómo distinguimos estos dos tipos de funciones en nuestro código? Muy simple, tienen resultados diferentes cuando se convierten en cadenas.

Funciones Nativas

Funciones escritas por usuarios

Cuando convertimos una función nativa en una cadena, el resultado siempre contendrá código nativo.

Así que podemos escribir esta función:

function isNative (func){
    return typeof func === 'function' && /native code/.test(func.toString())
}

 

Convertir hyp-hens a camelCase

Convertir un string como hola-mundo a holaMundo es un requisito muy común. Para hacer esto, podemos usar expresiones regulares.

Podemos usar /-(\w)/g para que coincidan todas las letras minúsculas después de y luego usar su mayúscula para reemplazarla.

function camelize(text) {
    const camelizeRE = /-(\w)/g;
    return text.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : ''); 
}

 

Eliminar etiquetas HTML de una cadena de texto.

Por razones de seguridad, a menudo necesitamos eliminar las etiquetas HTML de una cadena. Con una simple expresión regular, podemos realizar fácilmente esta tarea.

const stripHTMLTags = str => str.replace(/<[^>]*>/g, '');

 

Invertir una cadena de texto

Invertir una cadena de texto es un requisito común. Para ello, podemos dividir una cadena en una matriz y luego invertir la matriz y unirla.

const reverseStr = str => str.split('').reverse().join('');

 

Formatear un número a una cadena con comas

Para facilitar la lectura de un número grande, a menudo añadimos algún separador en medio del número.

  • 111111 => 111,111
  • 123456789 => 123,456,789

Normalmente, añadimos una coma a cada tres números.

 

Convertir las unidades de bytes en unidades razonables

Dentro de un ordenador, el tamaño de un archivo se mide a menudo en bytes. Pero si es un gran número, no es legible para los humanos.

Por ejemplo 86406091B, cuando vemos este número por primera vez, es difícil tener alguna sensación intuitiva. Pero si usamos 86,4 MB, estamos muy familiarizados con él. Así que tenemos que escribir una función, que es muy conveniente para nosotros para lograr este objetivo

function bytesToSize (bytes) {
    if (bytes === 0) return '0 B';

    var k = 1024;
    var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
    var i = Math.floor(Math.log(bytes) / Math.log(k))
    return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]
}

¡Descuento en mi curso de JavaScript para ti!