Tutorial JS

JS INICIO JS Introducción JS Dónde Salida JS Declaraciones JS Sintaxis JS Comentarios JS Variables JS JS Vamos Constante JS Operadores JS Aritmética JS Tarea JS Tipos de datos JS Funciones JS Objetos JS Eventos JS Cadenas JS Métodos de cadena JS Búsqueda de cadenas JS Plantillas de cadena JS Números JS Métodos numéricos JS Matrices JS Métodos de matriz JS Clasificación de matriz JS Iteración de matriz JS Constante de matriz JS Fechas JS Formatos de fecha JS Métodos de obtención de fecha JS Métodos de configuración de fechas JS Matemáticas JS JS al azar Booleanos JS Comparaciones JS Condiciones JS Interruptor JS Bucle JS para Bucle JS para entrada Bucle JS para de Bucle JS mientras descanso JS Iterables JS Conjuntos JS Mapas JS JS Tipo de Conversión de tipo JS JS bit a bit JS expresión regular Errores JS Alcance JS JS Elevación Modo estricto JS JS esta palabra clave Función de flecha JS Clases JS JSJSON Depuración JS Guía de estilo JS Prácticas recomendadas de JS Errores JS Rendimiento JS Palabras reservadas de JS

Versiones JS

Versiones JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Borde Historia de JS

Objetos JS

Definiciones de objetos Propiedades del objeto Métodos de objeto Visualización de objetos Accesores de objetos Constructores de objetos Prototipos de objetos Objeto iterables Conjuntos de objetos Mapas de objetos Referencia de objeto

Funciones JS

Definiciones de funciones Parámetros de función Invocación de función Llamada de función Función Aplicar Cierres de funciones

Clases JS

Introducción a la clase Herencia de clase Clase estática

JS asíncrono

Devoluciones de llamada JS JS asíncrono Promesas JS JS asíncrono/espera

JS HTML DOM

Introducción al DOM Métodos DOM Documento DOM Elementos DOM DOM HTML Formularios DOM DOM CSS Animaciones DOM Eventos DOM Oyente de eventos DOM Navegación DOM Nodos DOM Colecciones DOM Listas de nodos DOM

Lista de materiales del navegador JS

Ventana JS Pantalla JS Ubicación de JS Historia de JS Navegador JS Alerta emergente JS Tiempo JS Galletas JS

API web de JS

Introducción a la API web API de formularios web API de historial web API de almacenamiento web API de trabajo web API de búsqueda web API de geolocalización web

JS AJAX

Introducción a AJAX AJAX XMLHttp Solicitud AJAX Respuesta AJAX Archivo XML AJAX AJAXPHP Ajax ASP Base de datos AJAX Aplicaciones AJAX Ejemplos de AJAX

JSJSON

Introducción JSON Sintaxis JSON JSON frente a XML Tipos de datos JSON Análisis JSON Cadena JSON Objetos JSON Matrices JSON Servidor JSON JSONPHP JSONHTML JSON JSONP

JS frente a jQuery

Selectores jQuery HTML de jQuery CSS de jQuery DOM de jQuery

Gráficos JS

Gráficos JS Lienzo JS JS Trazado Gráfico JS.js Gráfico de Google JS JS D3.js

Ejemplos de JS

Ejemplos de JS JS HTML DOM Entrada HTML JS Objetos JS HTML Eventos JS HTML Navegador JS Editor JS Ejercicios JS Prueba JS Certificado JS

Referencias JS

Objetos JavaScript Objetos HTML DOM


Métodos de cadena de JavaScript


Los métodos de cadenas te ayudan a trabajar con cadenas.


Métodos y propiedades de cadenas

Los valores primitivos, como "John Doe", no pueden tener propiedades ni métodos (porque no son objetos).

Pero con JavaScript, los métodos y propiedades también están disponibles para valores primitivos, porque JavaScript trata los valores primitivos como objetos cuando ejecuta métodos y propiedades.


Longitud de cadena de JavaScript

La lengthpropiedad devuelve la longitud de una cadena:

Ejemplo

let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = txt.length;

Extracción de partes de cuerdas

Hay 3 métodos para extraer una parte de una cadena:

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

Segmento de cadena de JavaScript ()

slice()extrae una parte de una cadena y devuelve la parte extraída en una nueva cadena.

El método toma 2 parámetros: la posición inicial y la posición final (final no incluido).

Este ejemplo corta una porción de una cadena desde la posición 7 a la posición 12 (13-1):

Ejemplo

let str = "Apple, Banana, Kiwi";
let part = str.slice(7, 13);

Nota

JavaScript cuenta posiciones desde cero.

La primera posición es 0.

La segunda posición es 1.

Si un parámetro es negativo, la posición se cuenta desde el final de la cadena.

Este ejemplo corta una porción de una cadena desde la posición -12 a la posición -6:

Ejemplo

let str = "Apple, Banana, Kiwi";
let part = str.slice(-12, -6);

Si omite el segundo parámetro, el método eliminará el resto de la cadena:

Ejemplo

let part = str.slice(7);

o, contando desde el final:

Ejemplo

let part = str.slice(-12);


Subcadena de cadena de JavaScript ()

substring()es similar a slice().

La diferencia es que substring()no puede aceptar índices negativos.

Ejemplo

let str = "Apple, Banana, Kiwi";
let part = str.substring(7, 13);

Si omite el segundo parámetro, substring()cortará el resto de la cadena.


Substr de cadena de JavaScript ()

substr()es similar a slice().

La diferencia es que el segundo parámetro especifica la longitud de la parte extraída.

Ejemplo

let str = "Apple, Banana, Kiwi";
let part = str.substr(7, 6);

Si omite el segundo parámetro, substr()cortará el resto de la cadena.

Ejemplo

let str = "Apple, Banana, Kiwi";
let part = str.substr(7);

Si el primer parámetro es negativo, la posición cuenta desde el final de la cadena.

Ejemplo

let str = "Apple, Banana, Kiwi";
let part = str.substr(-4);

Sustitución del contenido de la cadena

El replace()método reemplaza un valor especificado con otro valor en una cadena:

Ejemplo

let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

Nota

El replace()método no cambia la cadena a la que se llama.

El replace()método devuelve una nueva cadena.

De forma predeterminada, el replace()método reemplaza solo la primera coincidencia:

Ejemplo

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

De forma predeterminada, el replace()método distingue entre mayúsculas y minúsculas. Escribir MICROSOFT (con mayúsculas) no funcionará:

Ejemplo

let text = "Please visit Microsoft!";
let newText = text.replace("MICROSOFT", "W3Schools");

Para reemplazar mayúsculas y minúsculas, use una expresión regular con una /ibandera (insensible):

Ejemplo

let text = "Please visit Microsoft!";
let newText = text.replace(/MICROSOFT/i, "W3Schools");

Nota

Las expresiones regulares se escriben sin comillas.

Para reemplazar todas las coincidencias, use una expresión regular con una /gbandera (coincidencia global):

Ejemplo

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace(/Microsoft/g, "W3Schools");

Nota

Aprenderá mucho más sobre las expresiones regulares en el capítulo Expresiones regulares de JavaScript .


Conversión a mayúsculas y minúsculas

Una cadena se convierte a mayúsculas con toUpperCase():

Una cadena se convierte a minúsculas con toLowerCase():


Cadena JavaScript en Mayúsculas()

Ejemplo

let text1 = "Hello World!";
let text2 = text1.toUpperCase();

Cadena JavaScript toLowerCase()

Ejemplo

let text1 = "Hello World!";       // String
let text2 = text1.toLowerCase();  // text2 is text1 converted to lower

JavaScript Cadena concatenación ()

concat()une dos o más cadenas:

Ejemplo

let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);

El concat()método se puede utilizar en lugar del operador más. Estas dos líneas hacen lo mismo:

Ejemplo

text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");

Nota

Todos los métodos de cadena devuelven una nueva cadena. No modifican la cadena original.

Dijo formalmente:

Las cadenas son inmutables: las cadenas no se pueden cambiar, solo reemplazar.


Recorte de cadena de JavaScript ()

El trim()método elimina los espacios en blanco de ambos lados de una cadena:

Ejemplo

let text1 = "      Hello World!      ";
let text2 = text1.trim();

Relleno de cadena de JavaScript

ECMAScript 2017 agregó dos métodos de cadena: padStart y padEndpara admitir el relleno al principio y al final de una cadena.


JavaScript String padStart()

Ejemplo

let text = "5";
let padded = text.padStart(4,0);

Compatibilidad con navegador

padStart() es una característica de ECMAScript 2017.

Es compatible con todos los navegadores modernos:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

padStart() no es compatible con Internet Explorer.


JavaScript Cadena padEnd()

Ejemplo

let text = "5";
let padded = text.padEnd(4,0);

Compatibilidad con navegador

padEnd() es una característica de ECMAScript 2017.

Es compatible con todos los navegadores modernos:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

padEnd() no es compatible con Internet Explorer.


Extracción de caracteres de cadena

Hay 3 métodos para extraer caracteres de cadena:

  • charAt(position)
  • charCodeAt(position)
  • Acceso a la propiedad [ ]

Cadena JavaScript charAt()

El charAt()método devuelve el carácter en un índice especificado (posición) en una cadena:

Ejemplo

let text = "HELLO WORLD";
let char = text.charAt(0);

Cadena JavaScript charCodeAt()

El charCodeAt()método devuelve el Unicode del carácter en un índice especificado en una cadena:

El método devuelve un código UTF-16 (un número entero entre 0 y 65535).

Ejemplo

let text = "HELLO WORLD";
let char = text.charCodeAt(0);

Acceso a la propiedad

ECMAScript 5 (2009) permite el acceso a la propiedad [ ] en cadenas:

Ejemplo

let text = "HELLO WORLD";
let char = text[0];

Nota

El acceso a la propiedad puede ser un poco impredecible:

  • Hace que las cadenas parezcan matrices (pero no lo son)
  • If no character is found, [ ] returns undefined, while charAt() returns an empty string.
  • It is read only. str[0] = "A" gives no error (but does not work!)

Example

let text = "HELLO WORLD";
text[0] = "A";    // Gives no error, but does not work

Converting a String to an Array

If you want to work with a string as an array, you can convert it to an array.

JavaScript String split()

A string can be converted to an array with the split() method:

Example

text.split(",")    // Split on commas
text.split(" ")    // Split on spaces
text.split("|")    // Split on pipe

If the separator is omitted, the returned array will contain the whole string in index [0].

If the separator is "", the returned array will be an array of single characters:

Example

text.split("")

Complete String Reference

For a complete String reference, go to our:

Complete JavaScript String Reference.

The reference contains descriptions and examples of all string properties and methods.

Test Yourself With Exercises

Exercise:

Convert the text into an UPPERCASE text:

let txt = "Hello World!";
txt = txt.;