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

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

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

1. Introducción

JavaScript es un lenguaje de programación esencial en el desarrollo web. En particular, la manipulación de cadenas se utiliza con frecuencia para formatear datos, realizar análisis y actualizar la interfaz de usuario de forma dinámica.
En este artículo explicaremos en detalle tres métodos de cadena de JavaScript muy usados: substr, substring y slice. Dado que estos métodos ofrecen funcionalidades similares, comprender sus diferencias te ayudará a elegir el adecuado para cada situación.
También analizaremos por qué substr ha sido depreciado y ofreceremos enfoques alternativos, proporcionando consejos prácticos para escribir JavaScript siguiendo las mejores prácticas actuales.

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

Esta sección describe la sintaxis básica y el uso de substr, substring y slice. Entender estos métodos te permitirá seleccionar el más apropiado y mejorar la legibilidad y mantenibilidad del código.

2.1 Método substr

Sintaxis:

string.substr(start, length)

Descripción:

• start : Índice inicial para la extracción (basado en cero).
• length : Número de caracteres a extraer. Si se omite, la extracción continúa hasta el final de la cadena.

Ejemplo de uso:

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

Nota:
El método substr está depreciado, y se recomienda evitar su uso en código futuro. Utiliza slice o substring en su lugar.

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 : Índice inicial de la extracción.
• end : Índice final (el carácter en este índice no se incluye).

Ejemplo de uso:

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

Puntos a considerar:

1. El orden de los argumentos se corrige automáticamente: Si llamas a substring(10, 4), se interpretará como substring(4, 10).
2. Los valores negativos se ignoran: Cualquier argumento negativo se trata como 0.

Ejemplo alternativo cuando se necesitan 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 : Índice inicial de la extracción.
• end : Índice final (el carácter en este índice no se incluye).

Ejemplo de uso:

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

Puntos a considerar:

1. Admite valores negativos: Los índices negativos cuentan desde el final de la cadena.
2. Funciona tanto con cadenas como con arreglos: También puede extraer elementos de arreglos, lo que lo hace muy versátil.

3. Tabla comparativa de cada método

Elección del método adecuado según el caso de uso:

• Extracción de segmentos cortos: → slice
• Cuando se requieren valores negativos: → slice
• Compatibilidad con código heredado: → Evitar substr; migrar según sea necesario

4. Ejemplos de código prácticos

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 valores basados en un patrón

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

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

5. Cómo manejar métodos depreciados

El método substr de JavaScript está depreciado. Esto se debe a que substr ha sido clasificado como un método no recomendado en las últimas especificaciones de ECMAScript.
Esta sección explica los problemas asociados a substr, los métodos alternativos y cómo migrar tu código.

5.1 ¿Por qué substr está obsoleto?

1. Legibilidad deficiente:

• substr usa el segundo argumento como el “número de caracteres a extraer,” lo cual difiere de otros métodos que usan un índice final. Esta inconsistencia dificulta la comprensión del código.

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

• Las características más antiguas se marcan como obsoletas durante la estandarización de ECMAScript. El código nuevo no debería depender de ellas.

1. Sin soporte para valores negativos:

• substr no admite índices negativos, mientras que slice sí.

5.2 Cómo migrar a métodos modernos

Caso 1: Extraer una subcadena de longitud fija

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

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

Caso 2: Extraer el final de una cadena

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

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

Caso 3: Extraer 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); // "index.html"

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

5.3 Puntos de refactorización para código heredado

1. Realizar un escaneo de código:

• Utiliza herramientas como ESLint para detectar dónde se usa substr.

1. Fortalecer la cobertura de pruebas:

• Usa pruebas unitarias para asegurar que el comportamiento sigue siendo correcto después de reemplazar los métodos.

1. Migrar gradualmente:

• Prioriza el reemplazo en secciones importantes o de ejecución frecuente.

5.4 Beneficios de migrar lejos de substr

1. Mejora de la legibilidad y mantenibilidad:

• La intención del código se vuelve más clara, mejorando la comprensión del equipo.

1. Compatibilidad con estándares modernos:

• Seguir los estándares ECMAScript garantiza una estabilidad a largo plazo.

1. Soporte flexible para valores negativos:

• slice permite una extracción concisa tanto desde la posición inicial como final.

6. Preguntas frecuentes (FAQ)

Esta sección resume preguntas comunes y sus respuestas sobre los métodos de manipulación de cadenas en JavaScript.

Q1: ¿Puedo seguir usando substr?

A: Sí, la mayoría de los navegadores modernos aún soportan substr.
Sin embargo, dado que ECMAScript lo marca como obsoleto, debería evitarse en proyectos nuevos o bases de código que requieran compatibilidad futura.
Alternativa recomendada:

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

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

A: La tabla a continuación resume sus diferencias:

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?

A:

1. Posible eliminación del soporte del navegador: substr podría dejar de estar soportado eventualmente.
2. Aumento de los costos de mantenimiento: Depurar características obsoletas lleva tiempo adicional.
3. Calidad de código inferior: No seguir los estándares modernos reduce la legibilidad.

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

A: slice es el mejor porque soporta índices negativos y ofrece gran flexibilidad.
Ejemplo:

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

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

// Last 10 characters
console.log(longText.slice(-10));  // "purposes."

Q5: ¿Cómo puedo contar hacia atrás usando valores negativos?

A: Usa slice, ya que substring trata los valores negativos como 0.
Ejemplo:

let str = "JavaScript";

// slice supports negative values
console.log(str.slice(-6));  // "Script"

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

Q6: ¿Hay diferencias de rendimiento?

A: Los navegadores modernos no muestran diferencias significativas de rendimiento entre slice, substring o substr. Dado que todas son funciones nativas, prioriza la legibilidad y el mantenimiento sobre micro-optimizaciones.

7. Resumen y Mejores Prácticas Recomendadas

En este artículo, exploramos los métodos de cadenas de JavaScript substr, substring y slice, cubriendo su sintaxis básica, diferencias, ejemplos de código prácticos y estrategias de migración para métodos obsoletos. Esta sección reorganiza las características clave de cada método y presenta las mejores prácticas modernas recomendadas.

7.1 Resumen de Cada Método

7.2 Criterios Prácticos de Selección

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

• Mejor cuando no se necesitan valores negativos. Ejemplo:

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

2. Usa slice para máxima flexibilidad:

• Soporta índices negativos y es el método preferido para nuevo código. Ejemplo:

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

3. Reemplaza substr lo antes posible:

• Migra a slice o substring cuando mantengas código legado.

7.3 Mejores Prácticas Modernas

1. Escribe código con la legibilidad en mente:

• El código claro y conciso mejora el mantenimiento a largo plazo.

1. Evita métodos obsoletos:

• substr puede perder soporte en navegadores en actualizaciones futuras—migra temprano.

1. Usa slice cuando trabajes con valores negativos:

• slice es el único método que maneja correctamente los índices negativos.

1. Usa ESLint y suites de pruebas para mantener la calidad del código:

• El análisis estático ayuda a detectar métodos obsoletos y a imponer estilos de codificación modernos.

7.4 Ejemplo de un Estilo de Codificación Moderno

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

// Example: Get 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. Revisa tu código existente:

• Verifica si substr se usa en tu proyecto y reemplázalo donde sea necesario.

1. Sigue las mejores prácticas en nuevo código:

• Usa patrones modernos y flexibles y evita características obsoletas.

1. Aprovecha comentarios y preguntas de la comunidad:

• Comparte preguntas o casos de uso para ayudar a otros a aprender mientras fortaleces tu comprensión.

Conclusión

Este artículo proporcionó una explicación detallada de los métodos substr, substring y slice de JavaScript, incluyendo sintaxis, ejemplos, tablas de comparación y estrategias de migración.

• Evita substr porque está obsoleto.
• Usa substring para escenarios simples.
• Usa slice para máxima flexibilidad y mejores prácticas modernas.

Usa estos conocimientos para escribir código JavaScript eficiente y mantenible.

8. Enlaces y Referencias Relacionadas

Para profundizar en tu comprensión de substr, substring y slice, aquí hay enlaces y referencias útiles. La documentación oficial y los recursos de aprendizaje te ayudarán a mantenerte al día con las últimas actualizaciones y técnicas de JavaScript.

8.1 Documentación Oficial

1. MDN Web Docs – Objeto String de JavaScript

• Enlace: String – MDN Web Docs
• Resumen: Una referencia completa para el objeto String de JavaScript con especificaciones detalladas y ejemplos.

1. Especificación de ECMAScript (ECMA-262)

• Enlace: ECMAScript Official Specification
• Descripción: La especificación oficial del lenguaje que cubre las últimas características de ECMAScript, métodos obsoletos y detalles técnicos.

8.2 Sitios de aprendizaje y tutoriales

1. JavaScript.info – Guía de manipulación de cadenas

• Enlace: JavaScript.info
• Descripción: Una guía extensa que cubre tanto operaciones básicas como avanzadas de cadenas con ejemplos prácticos.

1. Progate – Curso de JavaScript para principiantes a intermedios

• Enlace: Progate
• Descripción: Una plataforma interactiva ideal para principiantes que aprenden mediante ejercicios de codificación prácticos.

1. DotInstall – Lecciones introductorias de JavaScript

• Enlace: DotInstall
• Descripción: Lecciones en video cortas que facilitan aprender JavaScript de forma visual y rápida.

8.3 Recursos prácticos de código de ejemplo

1. GitHub – Proyectos de ejemplo de JavaScript

• Enlace: GitHub
• Descripción: Aprende buenas prácticas y patrones del mundo real explorando proyectos de código abierto.

1. CodePen – Compartir código interactivo

• Enlace: CodePen
• Descripción: Comparte y prueba tu código con otros desarrolladores o navega ejemplos para inspirarte.

8.4 Libros recomendados

1. JavaScript: The Definitive Guide (7th Edition)

• Descripción: Una referencia completa y autoritaria que cubre JavaScript desde los fundamentos hasta características avanzadas.

1. Mastering Modern JavaScript – Revised Edition

• Descripción: Una referencia práctica centrada en JavaScript moderno y estándares de codificación actualizados.

8.5 Comunidad y foros

1. Stack Overflow (Japanese)

• Enlace: Stack Overflow
• Descripción: Una comunidad de preguntas y respuestas donde puedes resolver problemas de JavaScript de manera eficiente.

1. Qiita

• Enlace: Qiita
• Descripción: Una plataforma japonesa con abundantes artículos prácticos y casos de estudio de JavaScript.

1. Teratail

• Enlace: Teratail
• Descripción: Un sitio de preguntas y respuestas japonés ideal para formular preguntas técnicas en tu idioma nativo.

Conclusión

Esta sección presentó una amplia gama de recursos — desde referencias oficiales hasta tutoriales, repositorios de código de ejemplo y plataformas comunitarias — para apoyar el aprendizaje continuo sobre las operaciones de cadenas en JavaScript.

Puntos clave:

1. Revisa la documentación oficial regularmente:

• Asegúrate de que tu estilo de codificación se mantenga alineado con los últimos estándares.

1. Fortalece tus habilidades mediante la codificación práctica:

• La práctica hace que los conceptos sean más claros y mejora la aplicación en el mundo real.

1. Participa en la comunidad:

• Compartir preguntas y soluciones ayuda a profundizar la comprensión y ampliar tu red.