Sergio Serrano's Blog

Sergio Serrano's Blog

SubString en JavaScript

Conoces la diferencia entre slice, substring y substr?

Subscribe to my newsletter and never miss my upcoming articles

Esta pregunta puede resultar difícil, incluso para los desarrolladores más experimentados.

En este post descubrirás como usar cada uno de ellos y cuando.

Sintaxis

String.substr( desde, longitud )

String.slice( desde, hasta )
String.substring( desde, hasta )

Similitudes y diferencias

Un solo argumento

Tanto slice, substring y substr requieren el primer argumento, que indica la posición inicial donde empieza la extracción de nuestro substring.

Si se omite el segundo argumento, la longitud del string es tomada por defecto.

const texto = 'Subscríbete! Dale like ❤️ y guarda el post!'

texto.substring(13) // 'Dale like ❤️ y guarda el post!'
texto.substr(13) // 'Dale like ❤️ y guarda el post!'
texto.slice(13) // 'Dale like ❤️ y guarda el post!'

Dos argumentos

slice y substring

El método slice y substring tienen el mismo comportamiento, el primer argumento funciona como la posición inicial del substring y el segundo argumento como la posición final (sin incluir) donde termina el substring.

substr

El método substr por otra parte, toma como primer argumento la posición inicial del substring, pero el segundo argumento hace referencia al número de caracteres que deseamos extraer en el substring.

const texto = 'Subscríbete! Dale like ❤️ y guarda el post!'

texto.slice(13, 26) // 'Dale like ❤️ '
texto.substring(13, 26) // 'Dale like ❤️ '

texto.substr(13, 26) // 'Dale like ❤️ y guarda el '

Índices negativos en el primer argumento

slice: selecciona los caracteres contando desde el final del string hacia la izquierda.

substring: No tiene efecto y devuelve el string completo.

substr: selecciona los caracteres contando desde el final del string hacia la izquierda.

const texto = 'Subscríbete! Dale like ❤️ y guarda el post!'

texto.slice(-15) // 'guarda el post!'
texto.substring(-15) // 'Subscribete! Dale like ❤️ y guarda el post!'
texto.substr(-15) // 'guarda el post!'

Primer argumento mayor que el segundo.

slice: No tiene efecto y devuelve un string vacio ''

substring: Intercambia los argumentos de forma ascendente tomando el menor indicé como el inicio del substring y el mayor como el final del substring.

substr: El segundo argumento en substr se refiere al número de caracteres que deseamos extraer, por lo que funciona como se espera.

const texto = 'Subscríbete! Dale like ❤️ y guarda el post!'

texto.slice(25, 13) // ''
texto.substring(25, 13) // 'Dale like ❤️ '
texto.substr(25, 13) // ' y guarda el '

Resumen

substr

¿Cuándo usarlo?

Cuando conoces la posición inicial y el número de caracteres que necesitas extraer.

Argumentos

Primer argumento: Requerido, La posición inicial donde empieza la extracción.

Segundo argumento: Opcional, El número de caracteres que deseamos extraer.

slice y substring

Funcionan de forma muy similar, con pequeñas diferencias.

Slice puede ser la mejor opción gracias a su comportamiento más predecible.

¿Cuándo usarlo?

Cuando conoces la posición inicial y la posición final del substring que deseas extraer.

Argumentos

Primer argumento: Requerido, La posición inicial donde empieza la extracción.

Segundo argumento: Opcional, La posición final donde termina la extracción (sin incluir).

 
Share this