javascript

Comprobar si cadena comienza con otra en JavaScript

Introducción

Ya vimos cómo saber si una cadena termina con una letra u otra cadena usando JS. Veamos hoy el proceso inverso o contrario: cómo saber si una cadena empieza o comienza con una letra o con otra cadena.

ES6 ha incorporado algunas nuevas funciones que nos facilitarán la vida, y si queremos soportar navegadores desactualizados también podemos hacerlo con un polyfill.

Comienza con en JavaScript

JavaScript ha evolucionado y los nuevos estándares ya traen funciones que siempre hemos necesitado. En este caso no necesitamos programar la función, pues ya existe y se llama startsWith cuya traducción es comienzaCon.

Este método para ver si comienza con una subcadena en JavaScript le pertenece a todas las cadenas. Es decir, podemos llamar directamente al método si tenemos una cadena, por ejemplo "hola".startsWith("h")

Lo que hace esta función es devolver un booleano indicando si comienza o no con determinada subcadena o letra.

Ejemplo de la función

Veamos algunas llamadas a esta función. Ya dijimos que todas las cadenas tienen este método.

let cadena = "Hola mundo";
if(cadena.startsWith("H")){
  console.log("La cadena comienza con H");
}

if(cadena.startsWith("h")){
  console.log("La cadena comienza con h");
}

if(cadena.startsWith("Ho")){
  console.log("La cadena comienza con Ho");
}
// también podemos almacenar el resultado, como siempre
let comienzaConB = cadena.startsWith("B");

// Y luego hacer cualquier cosa con la variable

if(comienzaConB){
  console.log("La cadena comienza con B");
}

La salida es esta:

“Comienza con” en JavaScript

Ejecuté el script en el lado del servidor, pero funciona igual en los navegadores, aquí sólo estoy probando.

Cabe mencionar que esta función distingue entre mayúsculas y minúsculas. Por lo tanto, no es lo mismo preguntar si empieza con H que con h; hay que tener cuidado con eso.

Si queremos que no importe si es mayúscula o minúscula, podemos convertir la cadena a minúscula o mayúscula, y luego compararla.

Con números

Igualmente podemos trabajar con números, convirtiéndolos primero a cadena. Digamos que tenemos el número 500 y queremos saber si comienza con 5, entonces el código de ejemplo queda así:

let numero = 500;
if(numero.toString().startsWith("5")){
    // El número comienza con 5
}else{
    // El número no comienza con 5
}

Lo convertimos a cadena usando toString y como ya es una cadena podemos llamar a todos los métodos que las cadenas tienen, incluyendo startsWith.

Alternativa para navegadores antiguos

Si quieres usar esta función pero también deseas que funcione en los navegadores antiguos como Internet Explorer, aquí dejo un polyfill.

Simplemente pega el código antes de que vayas a llamar a esta función. No afectará a los navegadores nuevos, y pondrá la función en los antiguos.

No es mi código, así que mejor dejo un enlace hacia un gist del autor.

https://github.com/mathiasbynens/String.prototype.startsWith/blob/master/startswith.js

Lo que hace es definir la función en caso de que no exista, así tú no te preocupas por definirla, simplemente la usas igual en cualquier navegador.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

3 días hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

3 días hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

3 días hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

3 días hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

3 días hace

Solución: Apache – Server unable to read htaccess file

Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…

4 días hace

Esta web usa cookies.