La diferencia entre String.slice y String.substring en JavaScript

1. ¿Qué es String y prototype en JavaScript?
2. ¿Qué es slice y substring en JavaScript?
3. ¿Cuáles son las similitudes entre slice y substring en JavaScript?
4. ¿Cuáles son las diferencias entre slice y substring en JavaScript?

En este artículo de tutorial, discutiremos qué es el segmento y la subcadena en JavaScript y qué los diferencia y qué no; En este artículo se abordarán las siguientes preguntas:

• ¿Qué es String y Prototype?
• ¿Qué es slice y substring?
• ¿Cuáles son las similitudes entre slice y substring?
• ¿Cuáles son las diferencias entre slice y substring?

¿Qué es String y prototype en JavaScript?

Comencemos discutiendo el objeto String. El objeto de cadena se usa para representar una secuencia de caracteres y se usa comúnmente con datos que deben representarse como texto.

Nota: Los valores primitivos no pueden tener propiedades ni métodos.

JavaScript trata los valores primitivos como objetos al envolverlos en una envoltura de objetos especial que proporciona una funcionalidad adicional, como propiedades y métodos auxiliares. Cada tipo primitivo tiene su envoltorio de objeto; el tipo de cadena se llama String.

Centremos nuestra atención en el prototipo, un prototipo es una propiedad global con todos los objetos JavaScript. Permite agregar nuevos métodos y propiedades a los objetos existentes.

function footballClub(name, stadium, founded) {
  this.name = name;
  this.stadium = stadium;
  this.founded = founded;
}
footballClub.prototype.firstTeamPlayers = 11;

const FCB = new footballClub('FC Barcelona', 'Camp Nou', 1899);
console.log(FCB.firstTeamPlayers);
// logs 11

Producción :

11

En el ejemplo anterior, cada instancia de footballClub tendrá la propiedad firstTeamPlayers establecida en 11. De manera similar, la propiedad prototype le permite agregar nuevas propiedades y métodos a las cadenas.

¿Qué es slice y substring en JavaScript?

slice y substring son propiedades prototipo que existen en todas las cadenas de JavaScript en forma de funciones. La función slice y substring extrae una parte de una cadena y la devuelve como una nueva cadena. El método slice no cambia la string original.

Se necesitan dos argumentos, el primer argumento especifica el índice inicial desde el que comenzar la extracción (el índice comienza en 0) y el segundo argumento especifica el índice final de la cadena (el índice final no se incluye como parte de la extracción)

let str = 'Gonna be extracted,Help!';
let slicedStr = str.slice(3, 8);
let substringStr = str.substring(3, 8);
console.log(slicedStr)     // logs: na be
console.log(substringStr)  // logs: na be

Producción :

na be
na be

¿Cuáles son las similitudes entre slice y substring en JavaScript?

Si start es igual a stop tanto slice como substring devuelven una cadena vacía.

let str = 'Gonna be extracted,Help!';
let slicedStr = str.slice(8, 8);
let substringStr = str.substring(9, 8);
console.log(slicedStr)     // logs:
console.log(substringStr)  // logs:

Producción :

Si stop (segundo argumento) no incluye tanto slice como substring, extrae caracteres hasta el final de la cadena.

let str = "Gonna be extracted,Help!"; 
let slicedStr = str.slice(3);
let substringStr = str.substring(3);
console.log(slicedStr) // logs: na be extracted,Help!
console.log(substringStr) // logs: na be extracted,Help!

Producción :

na be extracted,Help!
na be extracted,Help!

Si el argumento start o stop es mayor que la longitud de la cadena, se utilizará la longitud de la cadena en lugar del argumento pasado.

let str = 'Gonna be extracted,Help!';
let slicedStr = str.slice(1, 100);
let substringStr = str.substring(1, 100);
console.log(slicedStr)     // logs: onna be extracted,Help!
console.log(substringStr)  // logs: onna be extracted,Help!

Producción :

onna be extracted,Help!
onna be extracted,Help!

¿Cuáles son las diferencias entre slice y substring en JavaScript?

Si el argumento start es mayor que el argumento stop en slice, devolverá una cadena vacía, mientras que substring intercambiará esos dos argumentos si ese es el caso.

let str = 'Gonna be extracted,Help!';
let slicedStr = str.slice(8, 3);
let substringStr = str.substring(8, 3);
console.log(slicedStr)     // logs:
console.log(substringStr)  // logs: na be

Producción :

na be

Si el argumento start o el argumento stop es negativo o es NaN, se trata como si su valor fuera 0 en substring mientras que en slice si el argumento start es negativo, se pone el carácter del final de la cadena.

let str = 'Gonna be extracted,Help!';
let slicedStr = str.slice(-1);
let substringStr = str.substring(-1);
console.log(slicedStr)     // logs: !
console.log(substringStr)  // logs: Gonna be extracted,Help!

Producción :

!
Gonna be extracted,Help!