Métodos de cadena de JavaScript explicados: substr vs substring vs slice (Mejores prácticas)

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introducción

JavaScript es un lenguaje de programación esencial en el desarrollo web moderno. En particular, la manipulación de cadenas se utiliza frecuentemente para el formateo de datos, el análisis y las actualizaciones dinámicas de la interfaz de usuario.

Este artículo ofrece una explicación detallada de tres métodos de cadenas de JavaScript de uso frecuente—substr, substring y slice. Dado que estos métodos tienen una funcionalidad similar, comprender sus diferencias le ayudará a elegir el más apropiado para cada situación.

También discutiremos por qué substr ha sido desaprobado, presentaremos alternativas recomendadas y ofreceremos consejos prácticos para alinear su código con las mejores prácticas modernas de JavaScript.

2. Visión general básica y uso de cada método

Esta sección explica en detalle la sintaxis básica y el uso de substr, substring y slice. Al comprender cada método, podrá seleccionar el adecuado y mejorar tanto la legibilidad como el mantenimiento del código.

2.1 Método substr

Sintaxis:

string.substr(start, length)

Descripción:

• start: Especifica la posición inicial (índice) para la extracción. La indexación comienza en 0.
• length: Especifica la cantidad de caracteres a extraer. Si se omite, se extraen los caracteres desde la posición inicial hasta el final de la cadena.

Ejemplo:

let str = "JavaScript";
console.log(str.substr(0, 4)); // Output: "Java"
console.log(str.substr(4, 6)); // Output: "Script"

Notas importantes:
El método substr está desaprobado, y su uso se desaconseja en el desarrollo moderno de JavaScript. En su lugar, utilice slice o substring como alternativas.

Ejemplo alternativo (usando slice):

let str = "JavaScript";
console.log(str.slice(0, 4)); // Output: "Java"
console.log(str.slice(4));   // Output: "Script"

2.2 Método substring

Sintaxis:

string.substring(start, end)

Descripción:

• start: Especifica la posición inicial para la extracción.
• end: Especifica la posición final (el carácter en este índice no se incluye).

Ejemplo:

let str = "JavaScript";
console.log(str.substring(0, 4));  // Output: "Java"
console.log(str.substring(4, 10)); // Output: "Script"

Puntos clave:

1. El orden de los argumentos se ajusta automáticamente: Si se especifica substring(10, 4), se interpreta automáticamente como substring(4, 10).
2. Los valores negativos se ignoran: Si se proporciona un valor negativo, se trata como 0.

Alternativa cuando se requieren valores negativos (usando slice):

let str = "JavaScript";
console.log(str.slice(-6)); // Output: "Script"

2.3 Método slice

Sintaxis:

string.slice(start, end)

Descripción:

• start: Especifica la posición inicial para la extracción.
• end: Especifica la posición final (el carácter en este índice no se incluye).

Ejemplo:

let str = "JavaScript";
console.log(str.slice(0, 4));  // Output: "Java"
console.log(str.slice(-6));   // Output: "Script"

Puntos clave:

1. Admite valores negativos: Los valores negativos se interpretan como desplazamientos desde el final de la cadena.
2. Aplicable tanto a cadenas como a arreglos: Dado que slice también puede usarse con arreglos, es un método muy versátil.

3. Tabla comparativa de cada método

Cómo elegir según el caso de uso:

• Extracción de una porción corta de una cadena: → slice
• Cuando se necesitan índices negativos: → slice
• Compatibilidad con código heredado: → Evite substr y migre a alternativas modernas

4. Ejemplos prácticos de código

Manipulación básica de cadenas

let text = "JavaScriptProgramming";

// Extract the first 10 characters
console.log(text.slice(0, 10)); // "JavaScript"

// Extract the last 3 characters
console.log(text.slice(-3));   // "ing"

Extracción de un valor a partir de un patrón específico

let url = "https://example.com/index.html";

// Get the filename
console.log(url.slice(url.lastIndexOf("/") + 1)); // "index.html"

5. Manejo de Métodos Obsoletos

En JavaScript, el método substr se considera obsoleto. Esto se debe a que ha sido clasificado oficialmente como un enfoque no recomendado en las últimas especificaciones de ECMAScript. Esta sección explica los problemas con substr, las alternativas disponibles y estrategias prácticas de migración.

5.1 ¿Por qué substr está obsoleto?

1. Baja legibilidad:

• El método substr indica la cantidad de caracteres a extraer como su segundo argumento, lo que difiere de otros métodos que usan posiciones de inicio y fin. Esta inconsistencia hace que el código sea más difícil de entender a simple vista.

2. Posibles problemas de compatibilidad futura debido a cambios en la especificación:

• Durante el proceso de estandarización de ECMAScript, las características más antiguas pueden marcarse como obsoletas. Como resultado, se debe evitar substr en código nuevo para garantizar la compatibilidad a largo plazo.

3. No admite valores negativos:

• Mientras que substr no soporta valores negativos, slice sí admite índices negativos, lo que permite una extracción de cadenas más flexible.

5.2 Cómo migrar a métodos alternativos

Caso 1: Extraer una subcadena de longitud fija

// Deprecated code
let str = "JavaScript";
console.log(str.substr(0, 4)); // Output: "Java"

// Recommended code (slice)
console.log(str.slice(0, 4)); // Output: "Java"

Caso 2: Extraer el final de una cadena

// Deprecated code
console.log(str.substr(-6)); // Error (negative values are not supported)

// Recommended code (slice)
console.log(str.slice(-6)); // Output: "Script"

Caso 3: Extraer una parte de una URL o nombre de archivo

let url = "https://example.com/index.html";

// Deprecated code
let filename = url.substr(url.lastIndexOf("/") + 1);
console.log(filename); // Output: "index.html"

// Recommended code (slice)
let filenameNew = url.slice(url.lastIndexOf("/") + 1);
console.log(filenameNew); // Output: "index.html"

5.3 Consejos de refactorización para código heredado

1. Ejecutar un escaneo de código:

• Utiliza herramientas como ESLint para detectar ocurrencias de substr en tu base de código.

2. Mejorar la cobertura de pruebas:

• Usa pruebas unitarias para verificar el comportamiento después de la refactorización y asegurar que los cambios no introduzcan regresiones.

3. Migrar gradualmente:

• Prioriza las secciones críticas de tu base de código y reemplaza los métodos obsoletos paso a paso.

5.4 Beneficios de migrar lejos de substr

1. Mejor legibilidad y mantenibilidad:

• La intención del código se vuelve más clara, facilitando la colaboración y el mantenimiento a largo plazo.

2. Alineación con especificaciones modernas:

• Cumplir con el estándar ECMAScript garantiza actualizaciones futuras más fluidas y mayor compatibilidad.

3. Manejo flexible de valores negativos:

• Usar slice permite extraer fácilmente tanto desde el principio como desde el final de las cadenas, resultando en código más limpio y conciso.

6. Preguntas Frecuentes (FAQ)

Esta sección resume preguntas comunes y sus respuestas relacionadas con los métodos de manipulación de cadenas en JavaScript, ayudando a los lectores a resolver rápidamente dudas típicas.

Q1: ¿Sigue siendo utilizable substr?

R:
Sí, substr sigue funcionando en la mayoría de los navegadores modernos. Sin embargo, dado que está obsoleto en la especificación de ECMAScript, debe evitarse en proyectos nuevos o cuando se considere la compatibilidad a largo plazo.

Alternativa recomendada:

let str = "JavaScript";
console.log(str.slice(0, 4)); // Output: "Java"

Q2: ¿Cuál es la diferencia entre slice y substring?

R:
La tabla a continuación resume las diferencias clave entre slice y substring.

Ejemplos:

let str = "JavaScript";

// slice examples
console.log(str.slice(0, 4));   // "Java"
console.log(str.slice(-6));    // "Script"

// substring examples
console.log(str.substring(0, 4));  // "Java"
console.log(str.substring(4, 10)); // "Script"

Q3: ¿Cuáles son los riesgos de seguir usando métodos obsoletos?

R:
Continuar usando métodos obsoletos puede conllevar los siguientes riesgos.

1. Fin del soporte del navegador: En el futuro, substr podría dejar de ser compatible con los navegadores.
2. Aumento de los costos de mantenimiento: Solucionar errores o advertencias provocados por métodos obsoletos puede generar una sobrecarga innecesaria.
3. Disminución de la calidad del código: No alinearse con las especificaciones modernas reduce la legibilidad y la mantenibilidad.

Q4: ¿Qué método es el mejor para manejar cadenas largas?

R:
Al trabajar con cadenas largas, slice es la mejor opción debido a su flexibilidad y soporte para índices negativos.

Ejemplo:

let longText = "This is a very long text string used for testing purposes.";

// Get the first 10 characters
console.log(longText.slice(0, 10)); // "This is a "

// Get the last 10 characters
console.log(longText.slice(-10));  // "purposes."

Q5: ¿Cómo puedo contar desde el final usando valores negativos?

R:
Aunque slice admite valores negativos, substring trata los valores negativos como 0, por lo que se debe tener precaución.

Ejemplo:

let str = "JavaScript";

// Extract from the end using slice
console.log(str.slice(-6));  // "Script"

// substring treats negative values as 0
console.log(str.substring(-6)); // "JavaScript"

Q6: ¿Existen diferencias de rendimiento?

R:
En los navegadores modernos, no hay diferencias de rendimiento significativas entre slice, substring y substr. Dado que todos están implementados como funciones nativas, se recomienda priorizar la legibilidad y la mantenibilidad sobre el rendimiento.

7. Resumen y Mejores Prácticas Recomendadas

Este artículo explicó los métodos de manipulación de cadenas en JavaScript—substr, substring y slice—desde su uso básico hasta sus diferencias clave, ejemplos prácticos y estrategias para manejar métodos obsoletos.

Esta sección resume cada método y destaca las mejores prácticas recomendadas según los estándares modernos de JavaScript.

7.1 Resumen de Cada Método

7.2 Criterios Prácticos para Elegir el Método Adecuado

1. Usar substring para extracción simple de rangos:

• Recomendado cuando se trabaja con cadenas cortas y no se requieren valores negativos. Ejemplo:

  let str = "JavaScript";
  console.log(str.substring(0, 4)); // Output: "Java"
  

2. Elegir slice para máxima flexibilidad:

• Como admite índices negativos y ofrece mayor versatilidad, slice es la opción más recomendada para código moderno. Ejemplo:

  let str = "JavaScript";
  console.log(str.slice(-6)); // Output: "Script"
  

3. Reemplazar substr lo antes posible:

• En bases de código heredadas, sustituir proactivamente substr por slice o substring.

7.3 Mejores Prácticas Modernas

1. Priorizar la legibilidad:

• Escribir código claro y conciso mejora la mantenibilidad a largo plazo.

2. Eliminar métodos obsoletos:

• Dado que substr podría eliminarse en futuras actualizaciones, migra activamente a slice o substring.

3. Usar slice cuando se requieran valores negativos:

• slice permite una extracción flexible hacia atrás, lo que lo hace ideal para muchos casos de uso reales.

7.4 Ejemplos de Estilo de Código

Finalmente, aquí tienes algunos ejemplos de manipulación de cadenas moderna escritos con un estilo limpio y mantenible.

// Example: Extracting the domain from an email address
let email = "user@example.com";
let domain = email.slice(email.indexOf("@") + 1);
console.log(domain); // Output: "example.com"

// Example: Extracting a file extension from a URL
let url = "document.pdf";
let extension = url.slice(-3);
console.log(extension); // Output: "pdf"

7.5 Plan de Acción para los Lectores

1. Realizar una revisión de código:

• Verificar los proyectos existentes en busca de uso de substr y reemplazarlo por slice o substring según corresponda.

2. Aplicar las mejores prácticas en código nuevo:

• Seguir las especificaciones modernas y diseñar el código pensando en la legibilidad y el manejo de índices negativos.

3. Aprovechar comentarios y preguntas:

• Fomente preguntas y discusiones sobre puntos poco claros o casos de uso específicos para compartir conocimiento dentro de la comunidad.

Conclusión

Este artículo explicó los métodos de cadenas de JavaScript substr, substring y slice utilizando sintaxis básica, ejemplos de uso y tablas comparativas.

• substr debe evitarse porque está obsoleto.
• substring es adecuado para casos de uso simples.
• slice es el método más flexible y recomendado.

Utilice este conocimiento para escribir código JavaScript eficiente, legible y mantenible.

8. Enlaces y Referencias Relacionados

Para profundizar aún más su comprensión de substr, substring y slice, esta sección ofrece enlaces útiles y materiales de referencia. La documentación oficial y los recursos de aprendizaje le ayudarán a mantenerse al día con las últimas especificaciones y técnicas avanzadas.

8.1 Documentación Oficial

1. MDN Web Docs – Objeto String de JavaScript

• Link: String – MDN Web Docs
• Description: Documentación de referencia oficial para el objeto String de JavaScript, que incluye especificaciones detalladas y ejemplos para cada método.

2. Especificación ECMAScript (ECMA-262)

• Link: ECMAScript Official Specification
• Description: La especificación oficial de ECMAScript que detalla las características del lenguaje JavaScript, incluidos los métodos obsoletos y las actualizaciones recientes.

8.2 Sitios de Aprendizaje y Tutoriales

1. JavaScript.info – Métodos de Cadenas

• Link: JavaScript.info
• Description: Explicaciones exhaustivas de la manipulación de cadenas, desde lo básico hasta casos de uso avanzados, con ejemplos prácticos.

2. Progate – Cursos de Aprendizaje de JavaScript

• Link: Progate
• Description: Una plataforma de aprendizaje interactiva para principiantes, que cubre los fundamentos de JavaScript mediante codificación práctica.

3. Dotinstall – Curso para Principiantes de JavaScript

• Link: Dotinstall
• Description: Una plataforma de aprendizaje basada en videos que permite una comprensión rápida y visual de los conceptos de JavaScript.

8.3 Recursos Prácticos de Código de Ejemplo

1. GitHub – Proyectos de Ejemplo de JavaScript

• Link: GitHub
• Description: Aprenda patrones y buenas prácticas de JavaScript del mundo real a través de proyectos de código abierto.

2. CodePen – Playground Interactivo de Código

• Link: CodePen
• Description: Una plataforma para compartir y experimentar con código JavaScript en tiempo real.

8.4 Libros Recomendados

1. JavaScript: The Definitive Guide, 7th Edition (O’Reilly)

• Overview: Una referencia completa que cubre los fundamentos de JavaScript hasta las últimas características del lenguaje.

2. Modern JavaScript Development Guide (Revised Edition)

• Overview: Una guía práctica centrada en la sintaxis moderna de JavaScript y técnicas de desarrollo del mundo real.

8.5 Comunidades y Foros

1. Stack Overflow

• Link: Stack Overflow
• Description: Una comunidad global de preguntas y respuestas para dudas relacionadas con la programación y solución de problemas.

2. Qiita

• Link: Qiita
• Description: Una plataforma japonesa de artículos técnicos que presenta numerosos ejemplos prácticos de JavaScript.

3. Teratail

• Link: Teratail
• Description: Un sitio de preguntas y respuestas japonés donde los desarrolladores pueden formular preguntas en japonés.

Resumen

Esta sección presentó referencias oficiales, recursos de aprendizaje, repositorios de código de ejemplo y comunidades de desarrolladores relacionadas con la manipulación de cadenas en JavaScript.

Puntos Clave:

1. Verifique las especificaciones usando la documentación oficial:

• Haz un hábito revisar las especificaciones y guías de uso más recientes.

2. Fortalece habilidades prácticas mediante tutoriales y código de ejemplo:

• La codificación práctica refuerza tanto la comprensión teórica como la aplicación en el mundo real.

3. Comparte conocimientos a través de comunidades de desarrolladores:

• Participar en discusiones ayuda a ampliar tu experiencia y red profesional.