SubString en JavaScript
Conoces la diferencia entre slice, substring y substr?
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).