Estas 2 funciones son bastante similares en su sintaxis pero son diferentes en algunos casos. Veamos la diferencia entre ellos.
- slice():
este método selecciona la parte de una string y devuelve la parte seleccionada como una nueva string . Los parámetros de inicio y finalización se utilizan para especificar la parte extraída.
El primer carácter comienza con el índice 0.Sintaxis:
str.slice(start, end)
Parámetro:
- inicio: Este parámetro es obligatorio. Especifica la posición desde donde iniciar la extracción. El primer carácter comienza en la posición 0.
- fin: Este parámetro es opcional. La posición (hasta, pero excluyendo) donde detener la selección. Si se omite el parámetro, la función selecciona todos los caracteres desde el parámetro inicial hasta el final de la string.
- substring():
esta función tiene la misma sintaxis que slice().
Este método selecciona la parte de una string y devuelve la parte seleccionada como una nueva string . Los parámetros de inicio y finalización se utilizan para especificar la parte extraída.
El primer carácter comienza con el índice 0.Sintaxis:
str.substring(start, end)
Parámetro:
- inicio: Este parámetro es obligatorio. Especifica la posición desde donde iniciar la extracción. El primer carácter comienza en la posición 0.
- fin: Este parámetro es opcional. La posición (hasta, pero excluyendo) donde detener la selección. Si se omite el parámetro, la función selecciona todos los caracteres desde el parámetro inicial hasta el final de la string.
Resultado común
Ambos dan los mismos resultados en los casos dados.
- Si
start == stop, ambos devuelven una string vacía - Si
stopse omite, ambos extraen caracteres hasta el final de la string. - Si algún argumento es mayor que la longitud de la string, se utilizará la longitud de la string en ese caso.
substring()
Resultados separados de substring()
- Si
start > stop, entonces la función intercambia ambos argumentos. - Si algún argumento es negativo o es NaN, se trata como 0.
slice()
Resultados separados de slice()
- Si
start > stop, esta función devolverá una string vacía. (“”) - Si
startes negativo, establece char desde el final de la string, como substr(). - Si
stopes negativo, se ponestop = string.length – Math.abs(stop)(valor original)
Estos son algunos de los ejemplos.
Ejemplo-1: Estos ejemplos dan los mismos resultados en ambos casos.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript |
difference between String.slice and
String.substring
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP">
</p>
<button onclick="Geeks()">
click Here
</button>
<p id="GFG_DOWN"
style="color:green;">
</p>
<script>
var str = "This is GeeksForGeeks";
var up = document.getElementById("GFG_UP");
var down = document.getElementById("GFG_DOWN");
up.innerHTML = "Str = '" + str + "'";
function Geeks() {
down.innerHTML = "str.slice() = "
+ str.slice(0, 13) +
"<br>str.substring() = "
+ str.substring(0, 13);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-2: En este ejemplo, en el caso de substring() , intercambia los argumentos cuando start>stop donde slice() devuelve la string vacía.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript | difference
between String.slice and
String.substring
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP">
</p>
<button onclick="Geeks()">
click Here
</button>
<p id="GFG_DOWN"
style="color:green;">
</p>
<script>
var str = "This is GeeksForGeeks";
var up = document.getElementById("GFG_UP");
var down = document.getElementById("GFG_DOWN");
up.innerHTML = "Str = '" + str + "'";
function Geeks() {
down.innerHTML = "str.slice() = "
+ str.slice(13, 0) +
"<br>str.substring() = "
+ str.substring(13, 0);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-3: En este ejemplo, en el caso de substring(), los argumentos negativos se tratan como 0, donde slice() devuelve la string vacía.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript | difference
between String.slice and
String.substring
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP">
</p>
<button onclick="Geeks()">
click Here
</button>
<p id="GFG_DOWN"
style="color:green;">
</p>
<script>
var str = "This is GeeksForGeeks";
var up = document.getElementById("GFG_UP");
var down = document.getElementById("GFG_DOWN");
up.innerHTML = "Str = '" + str + "'";
function Geeks() {
down.innerHTML = "str.slice() = "
+ str.slice(-13, 7) +
"<br>str.substring() = "
+ str.substring(-13, 7);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
| string.rebanada | string.substring | |
| 1. | Se utiliza para extraer una parte de la string. | Se utiliza para extraer una substring en una string. |
| 2. | Su valor devuelto es una string porque devuelve una parte de la string. | No distorsiona la cuerda original. |
| 3. | Toma el parámetro como un número entero, es decir; los índices de string de donde a donde queremos extraer la string | Sus parámetros son la posición inicial y final de la substring que queremos extraer |
| 4. |
Sintaxis -: string_name.slice(index1 , index2) |
Sintaxis – : string.substring(inicio, fin) |
| 5. | Es un método de string incorporado en Javascript | También es un método de string incorporado en Javascript. |
| 6. | No distorsiona la cuerda original. | Su valor de retorno es de tipo string |
| 7. | Sus navegadores compatibles son: chrome, safari, Microsoft edge, firefox, Internet Explorer, opera | Sus navegadores compatibles son: chrome, safari, Microsoft edge, firefox, Internet Explorer, opera |
| 8. | Es una característica de ECMAScript1. | Es una característica de ECMAScript1. |
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA