✨ We are working on a new logo for MDN and would love your input!

- Vote for your favorite(s) »

Technologies References & Guides Feedback

Site search... (Press "/" to focus)

Primeros pasos con JavaScript Change language | View in English

Esta página fue traducida del inglés por la comunidad, pero no se mantiene activamente, por lo que puede estar desactualizada. Si desea
ayudar a mantenerlo, descubra cómo activar las configuraciones regionales inactivas.

Table of contents

Manejar texto — cadenas en JavaScript

Anterior Overview: First steps Siguiente

A continuación, centraremos nuestra atención en las cadenas de caracteres ( string s): así es como se
llaman los fragmentos de texto en programación. En este artículo veremos todas las cosas comunes que

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 realmente deberías saber sobre cadenas de caracteres al aprender JavaScript, como crear cadenas,
comillas en cadenas y unir cadenas.

Prerequisitos: Conocimientos básicos de informática, una comprensión básica de HTML y CSS y de lo que es JavaScript.

Objectivo: Familiarizarte con los aspectos básicos de las cadenas de caracteres en JavaScript.

El poder de las palabras

Las palabras son muy importantes para los humanos — son una parte fundamental de nuestra
comunicación. Dado que la Web es un medio en gran parte basado en texto diseñado para permitir a los
humanos comunicarse y compartir información, es útil para nosotros tener control sobre las palabras que
aparecen en él. HTML proporciona estructura y significado a nuestro texto, CSS nos permite personalizarlo
con precisión, y JavaScript contiene una serie de funciones para manipular cadenas, crear mensajes
personalizados de bienvenida, mostrar las etiquetas de texto adecuadas cuando sea necesario, organizar
los términos en el orden deseado y mucho más.

Casi todos los programas que hemos mostrado hasta ahora en el curso han involucrado alguna
manipulación de cadenas.

Cadenas — las bases

A primera vista, las cadenas se tratan de forma similar a los números, pero cuando profundizas empiezas
a ver diferencias notables. Comencemos ingresando algunas líneas de texto básicas en la consola para

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 familiarizarnos. Te proveeremos de una aquí abajo (también puedes abrir la consola en una pestaña o
ventana separada, o usar la consola de desarrollo del navegador si así lo prefieres).

>

Creando una cadena

1. Para comenzar, ingresa las siguientes líneas:

var string = 'La revolución no será televisada.';

string;

Al igual que con los números, declaramos una variable, iniciandola con el valor de una cadena, y
luego retornamos dicho valor. La única diferencia es que al escribir una cadena, necesitas envolverla
con comillas.

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 2. Si no lo haces, u olvidas una de las comillas, obtendrás un error. Intenta ingresando las siguientes
líneas:

var malString = Esto es una prueba;

var malString = 'Esto es una prueba;
var malString = Esto es una prueba';

Estas líneas no funcionan porque el texto sin comillas alrededor es tomado como nombre de una
variable, propiedad, palabra reservada, o algo similar. Si el navegador no las encuentra, entonces se
recibe un error( ej. "missing ; before statement"). Si el navegador puede ver dónde comienza una
cadena, pero no dónde termine, como se indica en la segunda oración, devuelve error (con
"unterminated string literal"). Si tu programa devuelve estos errores, revisa desde el inicio que todas
tus cadenas posean sus comillas.
3. Lo siguiente funcionará si previamente definiste la variable string — inténtalo:

var maltring = string;

malString;

malString ahora tiene el mismo valor que string .

Comillas simples vs. comillas dobles

1. En JavaScript, puedes escoger entre comillas simple y dobles para envolver tus cadenas. Ambas
funcionarán correctamente:

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 var simp = 'Comillas simples.';
var dobl = "Comillas dobles.";
simp;
dobl;

2. Hay muy poca diferencia entre las dos, y la que utilices dependerá de tus preferencias personales.
Sin embargo, deberías de elegir una y mantenerla; usar diferentes tipos de comillas en el código
podría llegar a ser confuso, especialmente si utilizas diferentes comillas en la misma cadena. El
siguiente ejemplo devolverá un error:

var badQuotes = 'What on earth?";

3. El navegador pensará que la cadena no se ha cerrado correctamente, porque el otro tipo de cita que
no estás usando, puede aparecer en la cadena. Por ejemplo, en estos dos casos su uso es correcto:

var sglDbl = 'Would you eat a "fish supper"?';

var dblSgl = "I'm feeling blue.";
sglDbl;
dblSgl;

4. Sin embargo, no puedes usar el mismo tipo de comillas en el interior de una cadena que ya las tiene
en los extremos. Lo siguiente devuelve error, porque confunde al navegador respecto de dónde
termina la cadena:

var bigmouth = 'I've got no right to take my place...';

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Lo que nos lleva directamente al siguiente tema.

Escapando caracteres en una cadena

Para solucionar nuestro problema anterior, necesitamos "escapar" el asunto de las comillas. Escapar
caracteres significa que les hacemos algo para asegurarnos que sean reconocidos como texto, y no parte
del código. En JavaScript, colocamos una barra invertida justo antes del caracter. Intenta ésto:

var bigmouth = 'I\'ve got no right to take my place...';

bigmouth;

Ahora funciona correctamente. Puedes escapar otros caracteres de la misma forma, ej. \" , y hay varios
códigos más. Ve a Notación de Escape para más detalles.

Concatenando cadenas
1. Concatenar es una elegante palabra de la programación que significa: "unir". Para unir cadenas en
JavaScript el símbolo de más (+), el mismo operador que usamos para sumar números, pero en este
contexto hace algo diferente. Vamos a probar un ejemplo en nuestra consola.

var one = 'Hello, ';

var two = 'how are you?';
var joined = one + two;
joined;

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 El resultado de este código es una variable llamada joined , que contiene el valor: "Hello, how are
you?" ("Hola, cómo estas?").
2. En la última instancia del código, unimos dos strings, pero lo puedes hacer con cuantas desees,
mientras que incluyas el símbolo de + entre ellas. Prueba esto:

var multiple = one + one + one + one + two;

multiple;

3. También puedes usar una combinación de variables y strings reales. Prueba esto:

var response = one + 'I am fine — ' + two;

response;

Nota: Cuando ingresas una string real en tu código, entre comillas simples o dobles, se llama string
literal.

La concatenación en contexto
Vamos a revisar la concatenación que usamos en la siguiente acción — veamos este ejemplo ya citado
previamente en el curso:

<button>Press me</button>

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 var button = document.querySelector('button');

button.onclick = function() {
var name = prompt('What is your name?');
alert('Hello ' + name + ', nice to see you!');
}

Press me

Aquí estamos usando una función Window.prompt() en la línea 4, que le pide al usuario la respuesta a
una pregunta, através de un cuadro emergente (también llamado popup) y luego, almacenará el dato
dentro de una variable dada — en este caso llamada name (nombre) . Luego, en la línea 5, usamos una
función Window.alert() para mostrar otra ventana emergente que contiene una cadena que hemos
unido de la concatenación de dos string literales y la variable name ( nombre).

Números versus cadenas

1. Entonces, ¿qué sucede cuando intentamos agregar (o concatenar) un string y un número? Vamos a
probar en la consola:

'Front ' + 242;

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Podrías esperar que diera un error, pero funciona a la perfección. Tratar de representar un string
como un número no tiene sentido, pero representar un número como string si que lo tiene, así que el
navegador convierte el número en una string y las muestra juntas.
2. Incluso puedes hacer esto con dos números — puedes forar un número para que se convierta en
una string envolviéndolo entre comillas. Prueba lo siguiente (estamos utilizando el operador typeof
para verificar si la variable es un número o una cadena):

var myDate = '19' + '67';

typeof myDate;

3. Si tienes una variable numérica, que deseas convertir en una string, pero no cambiar de otra forma, o
una variable string, que deseas convertir a número, pero no cambiarla de otra forma, puedes usar las
siguientes construcciones:
El objecto Number convertirá cualquier cosa que se le pase en un número, si puede. Intenta lo
siguiente:

var myString = '123';

var myNum = Number(myString);
typeof myNum;

Por otra parte, cada número tiene un método llamado toString() que convertirá el
equivalente en una string. Prueba esto:

var myNum = 123;

var myString = myNum.toString();
typeof myString;

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Estas construcciones pueden ser muy útiles en ciertas situaciones. Por ejemplo, si un usuario
introduce un número en un campo de texto de un formulario, será un string. Sin embargo, si quieres
añadir ese número a algo, lo necesitas convertir a número, así que puedes usar esta construcción
para hacerlo. Hicimos exactamente esto en el ejercicio de ejemplo: Juego adivina el número en la
línea 54 (Juego Adivina el número, en la línea 54 ).

Prueba tus habilidades

Llegaste al final de este artículo, pero ¿puédes recordar la información más importante? Puedes encontrar
algunas pruebas para verificar que has comprendido esta información antes de seguir avanzando — Ve
Prueba tus habilidades: Strings. Ten en cuenta que esto requiere conocimiento del próximo artículo, por lo
que podrías leerlo antes.

Conclusión
Esto es lo básico que debes saber sobre las cadenas o string s en JavaScript. En el siguiente artículo
desarrollaremos más sobre esto, observando métodos de construcción de strings disponibles en
JavaScript y cómo podemos usarlos para manipular nuestras cadenas de la forma que queremos.

Anterior Overview: First steps Siguiente

En este módulo
¿Qué es JavaScript?

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Un primer acercamiento a JavaScript

¿Qué salió mal? Corrigiendo JavaScript

Guardando la información que necesitas— Variables
Matemáticas básicas en JavaScript — números y operadores
Manejo de texto — cadenas en JavaScript

Métodos útiles para el manejo de cadenas

Arreglos
Evaluaciones: Generador de historias absurdas

Last modified: 20 dic. 2021, by MDN contributors

Change your language

Español Change language

Related Topics
Complete beginners start here!

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Getting started with the Web

HTML — Structuring the Web

Introduction to HTML

Multimedia and embedding

HTML tables

CSS — Styling the Web

CSS first steps

CSS building blocks

Styling text

CSS layout

JavaScript — Dynamic client-side scripting

JavaScript first steps

JavaScript first steps overview

What is JavaScript?

A first splash into JavaScript

What went wrong? Troubleshooting JavaScript

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Storing the information you need — Variables

Basic math in JavaScript — Numbers and operators

Handling text — Strings in JavaScript

Useful string methods

Arrays

Assessment: Silly story generator

JavaScript building blocks

Introducing JavaScript objects

Asynchronous JavaScript

Client-side web APIs

Web forms — Working with user data

Core forms learning pathway

Advanced forms articles

Accessibility — Make the web usable by everyone

Accessibility guides

Accessibility assessment

Tools and testing

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Client-side web development tools

Introduction to client-side frameworks

React

Ember

Vue

Svelte

Angular

Git and GitHub

Cross browser testing

Server-side website programming

First steps

Django web framework (Python)

Express Web Framework (node.js/JavaScript)

Further resources

Common questions

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Web Technologies About

Learn Web Development MDN Web Docs Store

About MDN Contact Us

Feedback Firefox

MDN Mozilla

© 2005-2021 Mozilla and individual contributors. Content is available under these licenses.

Terms Privacy Cookies

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD