Métodos aplicables a un String en JavaScript

Primero que nada recordemos que todo en JavaScript es un objeto, nuestros strings también lo son y, por lo tanto, poseen métodos que pueden ser utilizados para realizar alguna acción.

A continuación una lista de estos métodos:

Para entender mejor los prototipos de objetos puedes leer este artículo escrito por mozilla

https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/Object_prototypes

iterator

Este método es probable que nunca lo uses. Lo que hace es retornar un nuevo objeto iterator que recorre sobre los caracteres de nuestro string retornando estos como string. Esto lo podemos utilizar con un bucle obteniendo cada caracter como puede verlo en el siguiente ejemplo sacado de mozilla:

const str = 'The quick red fox jumped over the lazy dog\'s back.';

const iterator = str[Symbol.iterator]();
let theChar = iterator.next();

while (!theChar.done && theChar.value !== ' ') {
  console.log(theChar.value);
  theChar = iterator.next();
  // expected output: "T"
  //                  "h"
  //                  "e"
}

cada vez que llamamos a iterator.next() pasa al siguiente carácter, va de hecho esto no es tan así next retorna done y value. Si done es true es porque el iterator ya no es capas de producir el próximo valor en otras palabras llegamos al fin de nuestro string.

value sería el valor del caracter.

charAt()

Nos dará el carácter que se encuentre en ese índice empezando por 0 en el ejemplo que da mozilla seria 0="T", 1="h", 2="e" 3=" " y 4="q" el cual es el carácter que le estamos pidiendo.

const sentence = 'The quick brown fox jumps over the lazy dog.';

const index = 4;

console.log(`The character at index ${index} is ${sentence.charAt(index)}`);
// expected output: "The character at index 4 is q"

Algo que tengo que aclarar aquí es que lo más probable que el string en un caso real se encuentre en una variable let en vez de una constante y esto en muchos de los casos que siguen si estamos obteniendo valores desde un string es probable que estemos interactuando con algo que ha puesto el usuario no tiene mucho sentido que sea nuestro string una constante.

charCodeAt()

const sentence = 'The quick brown fox jumps over the lazy dog.';

const index = 4;

console.log(`The character code ${sentence.charCodeAt(index)} is equal to ${sentence.charAt(index)}`);
// expected output: "The character code 113 is equal to q"

codePointAt()

Retorna un integer no negativo que es un UTF-16(16-bit Unicode Transformation Format).

const icons = '☃★♲';

console.log(icons.codePointAt(0));
// expected output: "9733"

concat()

Concatena 2 strings, vemos un ejemplo propio: Supongamos que tenemos 2 variables o 1 supongamos que es la parte de login por ejemplo cuando no estas logueado te dira hello, guest ( que seria algo asi como hola visitante)

const strguest = 'Hello';
const strlogged = 'Its nice to see you again';
let name = "";
if(name == ""){
  console.log(strguest.concat(', ', "guest"));
}else{
  console.log(strlogged.concat(', ', name));
}

Si cambiamos el valor de la variable a un nombre nos dara Nice to see you again, Bruno por ejemplo. Esto es un ejemplo un poco más realista que los que nos podemos encontrar online.

endsWith()

Este método determina si nuestro string termina con el valor dado, hay 2 formas de usar end with y esta son especificando la longitud de string al cual lo aplicaremos o sin especificar esta.

Algunos ejemplos son sacados de Mozilla pero en este caso, creare uno yo dado que no muestra ninguna aplicacion real.

Supongamos que estamos realizando algo parecido a nuestro wordpress y nuestro usuario puede ingresar codigo html pero queremos que estos sean divs si o si por x motivo.

<p>pease specify a div to be implemented on the theme</p>
<textarea id="mytextarea">
 
</textarea>
<br/>
<button id="btn">add</button>

//this is an example writed by LAgustin for blastcoding.com
var btn = document.querySelector('#btn')
btn.onclick = function(){
 let ta= document.querySelector('#mytextarea');
 endwithdiv(ta.value);
}

function endwithdiv(tastring){
  if(tastring.endsWith("</div>")){
    alert("your code ends with </div>");
  }
  else{
    alert("your code must end with div to continue");
  }
}

fromCharCode()

pasa de valores unicode a string, veamos el ejemplo que se nos da en mozilla :

console.log(String.fromCharCode(189, 43, 190, 61));
// expected output: "½+¾="

189 es el valor unicode para ½,43 es para +,190 es para ¾ y 61 para =

fromCodePoint()

sobre code point no se mucho pero creo que tiene que ver con los codigos de caracteres a string. Puedes saber mas aqui https://es.wikipedia.org/wiki/Codificaci%C3%B3n_de_caracteres#Tablas_tipogr%C3%A1ficas

Probemoslo

var mystring = String.fromCodePoint(0x61,0x444);       // "*"
console.log(mystring);

0x61 es a y 0x444 es una letra rusa asi que parece ser que se refiere a los codigos de caracteres

includes()

Este método chequea si existe una palabra dada o un string dado dentro del string, en este caso haremos un ejemplo para que busque dentro de un div, supon que hacemos un programa para publicar codigo y queremos cambiar el codigo por x motivo como puede ser el cambiar el nombre de una variable primero debemos saber si la palabra esta.

Tambien un ejemplo podria ser cuando estamos buscando una funcion y deseamos posicionarnos donde se encuentra esta o comportamientos de este estilo.

indexOf()

nos devuelve el indice donde se encuentra el string dado, por ejemplo:

teniendo en cuenta este texto quiero saber donde aparece pesonaje por primera vez

Pinocho (en italiano Pinocchio) es un personaje de la literatura italiana y universal. Se trata de una marioneta de madera, protagonista del libro «Las aventuras de Pinocho», escrito por Carlo Collodi, seudónimo de Carlo Lorenzini (Florencia 1826-1890), y publicado en un periódico italiano entre 1882 y 1883, con los títulos «Storia di un Burattino» («Historia de un títere») y «Le avventure di Pinocchio» («Las aventuras de Pinocho'»), libro ilustrado por Enrico Mazzanti

wikipedia pinocho

en este caso usare una constante con el texto

const texto ='Pinocho (en italiano Pinocchio) es un personaje de la literatura italiana y universal. Se trata de una marioneta de madera, protagonista del libro "Las aventuras de Pinocho", escrito por Carlo Collodi, seudónimo de Carlo Lorenzini (Florencia 1826-1890), y publicado en un periódico italiano entre 1882 y 1883, con los títulos "Storia di un Burattino" ("Historia de un títere") y "Le avventure di Pinocchio" ("Las aventuras de Pinocho'"), libro ilustrado por Enrico Mazzanti'
alert(texto.indexOf("personaje"));// esto nos da 38 sera verdad lo veremos en substring

lastIndexOf()

Este nos devuelve el ultimo indice de donde aparece la palabra buscada en el string.

const texto ='Pinocho (en italiano Pinocchio) es un personaje de la literatura italiana y universal. Se trata de una marioneta de madera, protagonista del libro "Las aventuras de Pinocho", escrito por Carlo Collodi, seudónimo de Carlo Lorenzini (Florencia 1826-1890), y publicado en un periódico italiano entre 1882 y 1883, con los títulos "Storia di un Burattino" ("Historia de un títere") y "Le avventure di Pinocchio" ("Las aventuras de Pinocho"), libro ilustrado por Enrico Mazzanti';
alert(texto.lastIndexOf("Pinocho"));// esto nos da 426

localeCompare()

Realiza una comparación entre el string al que se le aplica el metodo, en que lugar se encuentra el string comparado si el string es completamente igual esta función da 0. Si el string comparado esta antes dara un valor negativo. En caso de que el string comparado esta después de el valor de nuestro string dará positivo.

Básicamente mi string esta antes o después en el diccionario que el string que estoy comparando?

sintaxis:

localeCompare(compareString)

localeCompare(compareString, locales)

localeCompare(compareString, locales, options)

Ejemplo sencillo:

'a'.localeCompare('a'); // 0

match()

Devuelve el resultado de la comparación de un string con una expresión regular. Este método devuelve un array con los string donde se cumple lo de la expresión regular. En el siguiente ejemplo la expresión regular son todas las mayúsculas.

const paragraph = 'The quick brown fox jumps over the lazy dog. It barked.';
const regex = /[A-Z]/g;
const found = paragraph.match(regex);

console.log(found);
// expected output: Array ["T", "I"]

matchAll()

Retorna un iterador de todos los res resultados que se cumplan del string con respecto a la expresion regular.

The matchAll() method returns an iterator of all results matching a string against a regular expression, including capturing groups.

const regexp = /t(e)(st(\d?))/g;
const str = 'test1test2';

const array = [...str.matchAll(regexp)];

console.log(array[0]);
// expected output: Array ["test1", "e", "st1", "1"]

console.log(array[1]);
// expected output: Array ["test2", "e", "st2", "2"]

normalize()

retorna la normalizacion de el codigo unicode en forma de string. Esta parte de Normalizacion de unicode no la entiendo muy bien si desea saber sobre normalizacion de unicode puedes ir a la pagina de unicode normalization

Syntaxis

normalize()

normalize(form)

Form tiene 4 opciones:

• "NFC" -Canonical Decomposition, followed by Canonical Composition.
• "NFD" -Canonical Decomposition.
• "NFKC" -Compatibility Decomposition, followed by Canonical Composition.
• "NFKD" -Compatibility Decomposition.

El siguiente es un ejemplo de mozilla:

/ Initial string

// U+1E9B: LATIN SMALL LETTER LONG S WITH DOT ABOVE
// U+0323: COMBINING DOT BELOW
let str = '\u1E9B\u0323';

// Canonically-composed form (NFC)

// U+1E9B: LATIN SMALL LETTER LONG S WITH DOT ABOVE
// U+0323: COMBINING DOT BELOW
str.normalize('NFC'); // '\u1E9B\u0323'
str.normalize();      // same as above

// Canonically-decomposed form (NFD)

// U+017F: LATIN SMALL LETTER LONG S
// U+0323: COMBINING DOT BELOW
// U+0307: COMBINING DOT ABOVE
str.normalize('NFD'); // '\u017F\u0323\u0307'

// Compatibly-composed (NFKC)

// U+1E69: LATIN SMALL LETTER S WITH DOT BELOW AND DOT ABOVE
str.normalize('NFKC'); // '\u1E69'

// Compatibly-decomposed (NFKD)

// U+0073: LATIN SMALL LETTER S
// U+0323: COMBINING DOT BELOW
// U+0307: COMBINING DOT ABOVE
str.normalize('NFKD'); // '\u0073\u0323\u0307'

padEnd()

Rellena el string con una cadena dada al final de este, es muy parecido a que concatenes un string al final del que posees aunque no es igual veamos unos ejemplos.

'abc'.padEnd(6, "123456"); // "abc123"

Un ejemplo practico serian cuando nos dicen que nos van a eviar un sms a nuestro telefono celular 098*******

'098'.padEnd(6,"*");//"098******"

Aunque yo no le recomendaria usar esta funcion del lado del cliente para este proposito.Es preferible hacerlo del lado del servidor usando javascript php o el lenguaje que sea que corra del lado del servidor.

padStart()

Este metodo agrega al string otro string multiples veces si es necesario para llenar el lenght dado delante de el string al que se le aplica el methodo.

En el metodo anterior di como ejemplo los numeros de los celulares, en este ejemplo consideremos las tarjetas de debito:

'5851'.padStart(8,"*");//"********5851"

La verdad no me acuerdo en este momento cuantos numeros tienen las tarjetas de debito pero para el ejemplo tomamos como si fueran de 12 digitos

este tipo de informacion generalmente se encuentra en parte oculta cuando haces una compra ¿no quieres que el que este a tu lado sepa tu tarjeta de debito o si?

lo que puedes hacer en este caso es que tu servidor te mande los ultimos 4 numeros y utilizar este metodo.

raw()

es una función de plantilla de literales,Se utiliza para obtener un string crudo a partir de plantillas de string (es decir, el original, texto no interpretado)

Plantillas literales

Las plantillas literales son cadenas literales que habilitan el uso de expresiones incrustadas. Con ellas, es posible utilizar cadenas de caracteres de más de una línea, y funcionalidades de interpolación de cadenas de caracteres.

Mozilla developers Template_literals

let name = 'Bob';
String.raw`Hi\n${name}!`;
// 'Hi\\nBob!', substitutions are processed.

${name} – Las expresiones contenidas en ${}, junto con el texto entre ellas, son enviados como argumentos a una función. En este cas la variable name

repeat()

Repeat hace exactamente eso repite el string donde es usado las veces indicadas, si me pregunta en que puedo usar esto tal vez le responderia que en un inventario de un carrito aunque estos por lo general ponen 2linternas por ejemplo en vez de repetir esto.

const item =  "linterna";
var cantidad = 2;
console.log(item.repeat(cantidad));

replace()

Replace reemplazará una palabra por otra la primera vez que la encuentre veamos su sintaxis.

replace(regexp, newSubstr)

replace(regexp, replacerFunction)

replace(substr, newSubstr)

replace(substr, replacerFunction)

ahora veamos un ejemplo sencillo:

const p = 'Go is a statically typed, compiled programming language designed at Gogle';

console.log(p.replace('Gogle', 'Google'));
// expected output: "Go is a statically typed, compiled programming language designed at Goggle"

recuerda que tambien podemos usar expresiones regulares.

replaceAll()

Este método remplaza un string por otro dentro del string donde es llamado. Puede tambien decir que remplaza todas las a por b dentro de un string.

Sintaxis:

replaceAll(regexp, newSubstr)

replaceAll(regexp, replacerFunction)

replaceAll(substr, newSubstr)

replaceAll(substr, replacerFunction)

Ahora tomemos en cuenta el texto de pinocho nuevamente.

const texto ='Pinocho (en italiano Pinocchio) es un personaje de la literatura italiana y universal. Se trata de una marioneta de madera, protagonista del libro "Las aventuras de Pinocho", escrito por Carlo Collodi, seudónimo de Carlo Lorenzini (Florencia 1826-1890), y publicado en un periódico italiano entre 1882 y 1883, con los títulos "Storia di un Burattino" ("Historia de un títere") y "Le avventure di Pinocchio" ("Las aventuras de Pinocho"), libro ilustrado por Enrico Mazzanti';

console.log(p.replaceAll('Pinocho', 'Burro'));

search()

obtiene el lugar de la primera aparición donde se encuentra la expresión regular buscada dentro de string que llama el método. devuelve un integer en caso de no encontrar retorna -1

const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';

// any character that is not a word character or whitespace
const regex = /[^\w\s]/g;

console.log(paragraph.search(regex));
// expected output: 43

console.log(paragraph[paragraph.search(regex)]);
// expected output: "."

slice()

Extrae un substring de nuestro string devolviendo este como un nuevo string.

sintaxis:

slice(beginIndex)

slice(beginIndex, endIndex)

Bueno tomemos un texto ramdom y utilicemos slice, pero antes de hacer esto ¿se da cuenta de que slice y search se pueden utilizar en conjunto?

const str = 'La Santa María fue la mayor de las tres embarcaciones que Cristóbal Colón utilizó en su primer viaje al Nuevo Mundo en 1492. Fue fabricada con madera de Cantabria. Era propiedad de Juan de la Cosa.';

console.log(str.slice(14));
console.log(str.slice(58, 74));

split()

Divide un string en un array de strings

sintaxis:

cadena.split([separador][,limite])

separador: es la cadena por la cual se separa el string por ejemplo » » o » ,» u otro que queramos. cuando utilizamo » separaremos por caracteres.

límite: es el número de divisiones que queremos.

const str = 'La Santa María fue la mayor de las tres embarcaciones que Cristóbal Colón utilizó en su primer viaje al Nuevo Mundo en 1492. Fue fabricada con madera de Cantabria. Era propiedad de Juan de la Cosa.';

const words = str.split(' ');
console.log(words[3]);
// expected output: "María"

const chars = str.split('');
console.log(chars[3]);
// expected output: "S"

startsWith()

Chequea si una string comienza con una cadena de caracteres concreta. retorna un booleano. A este se le puede indicar desde que posición en el string empezar la comparación.

sintaxis:

str.startsWith(stringBuscada[, posicion])

//startswith
let str = 'To be, or not to be, that is the question.'

console.log(str.startsWith('To be'))          // true
console.log(str.startsWith('not to be'))      // false
console.log(str.startsWith('not to be', 10))  // true

substring()

devuelve un substring a partir del string original este es determinado por el parametro A y el parametro B, A siendo donde inicia el nuevo string y B donde termina.

Sintaxis:

cadena.substring(indiceA[, indiceB'])

const peliculas = 'Godzilla, Venom, Amina';
console.log(peliculas.substring(1, 3));
console.log(peliculas.substring(7));

toLocaleLowerCase()

const dotted = 'İstanbul';

console.log(`EN-US: ${dotted.toLocaleLowerCase('en-US')}`);
// expected output: "i̇stanbul"

console.log(`TR: ${dotted.toLocaleLowerCase('tr')}`);
// expected output: "istanbul"

toLocaleUpperCase()

'alphabet'.toLocaleUpperCase(); // 'ALPHABET'

'i\u0307'.toLocaleUpperCase('lt-LT'); // 'I'

let locales = ['lt', 'LT', 'lt-LT', 'lt-u-co-phonebk', 'lt-x-lietuva'];
'i\u0307'.toLocaleUpperCase(locales); // 'I'

toLowerCase()

Devuelve el valor del string en minúsculas.

sintaxis:

cadena.toLowerCase() 

var textoMayusculas="GODZILLA"
document.write(textoMayusculas.toLowerCase())

toString()

todos los objetos poseen un método toString() que es llamado automáticamente cuando es necesario representarlo como texto. La mayoría de las veces cuando aplicamos un toString a un objeto nos devolverá [object type], obviamente no en el caso que el objeto es un string.

cadena = new String("Hello world");
alert(cadena.toString())      // Displays "Hello world"

En caso de que queramos que un objeto no nos devuelva [object type] tendremos que sobrescribir el método para ese objeto.

Recuerdas que vimos objetos en JavaScript ya en otro post. Utilizaré el objeto auto para los siguientes ejemplos:

var auto = {
	marca:"jaguar",
	puertas :2,
	//ahora 2 metodos
	prenderAuto:function(){
		alert("el auto esta prendido");
	},
	apagarAuto:function(){
		alert("el auto esta apagado");
	}
}

que nos dara si aplicamos el método toString a auto?

alert(auto.toString())

Si estabas pensando en [object Object] estabas en lo correcto.

Ahora olvidémonos de los métodos y pensemos por un momento que este objeto lo creamos para una web de una automotora talvez me convendria que toString me de algo parecido a.

marca: jaguar, puertas: 2

¿qué pasa si queremos sobreescribir la función toString con el objeto tal como está?

var auto = {
	marca:"jaguar",
	puertas :2,
	//ahora 2 metodos
	prenderAuto:function(){
		alert("el auto esta prendido");
	},
	apagarAuto:function(){
		alert("el auto esta apagado");
	}
}

auto.prototype.toString = function x() {
  let retorno = "marca: " + this.marca + ", puertas:" + this.puertas;
  return retorno;
}

alert(auto);

Uncaught TypeError: auto.prototype is undefined

?‍♂️Que cornos paso? ¿No se supone que esto debía funcionar?

Pues no para poder sobreescribir necesitamos que el objeto tenga una función constructor. Entonces creemos uno

function auto(marca,puertas){
   this.marca = marca;
   this.puertas =puertas;
}

¿entonces como quedaría mi código?

function auto(marca,puertas){
   this.marca = marca;
   this.puertas =puertas;
}

miauto = new auto("jaguar",2);

auto.prototype.toString = function x() {
  let retorno = "marca: " + this.marca + ", puertas:" + this.puertas;
  return retorno;
}

alert(miauto);

toUpperCase()

Convierte el valor de nuestro string a mayúsculas

console.log( "alphabet".toUpperCase() ); // "ALPHABET"

trim()

Elimina los espacios en blanco en ambos extremos del string

var orig = '   Hello world  ';
console.log(orig.trim()); // 'Hello world'

// Otro ejemplo de .trim() eliminando el espacio en blanco sólo de un lado.

var orig = 'hello world    ';
console.log(orig.trim()); // 'hello world'

trimEnd()

Elimina los espacios en blanco al final del string

const greeting = '   Hello world!   ';

console.log(greeting);
// expected output: "   Hello world!   ";

console.log(greeting.trimEnd());
// expected output: "   Hello world!";

trimStart()

Elimina los espacios en blanco al inicio del string

const greeting = '   Hello world!   ';

console.log(greeting);
// expected output: "   Hello world!   ";

console.log(greeting.trimStart());
// expected output: "Hello world!   ";

valueOf()

devuelve el valor primitivo de un objeto String.

const stringObj = new String('foo');

console.log(stringObj);
// expected output: String { "foo" }

console.log(stringObj.valueOf());
// expected output: "foo"