path: root/files/es/learn/javascript/first_steps/strings/index.html

---
title: Manejar texto — cadenas en JavaScript
slug: Learn/JavaScript/First_steps/Strings
tags:
  - Artículo
  - Cadenas
  - Comillas
  - Guía
  - JavaScript
  - Novato
  - Principiante
  - Union
  - Unir
  - concatenación
  - 'l10n:priority'
  - strings
translation_of: Learn/JavaScript/First_steps/Strings
---
<p id="Manejo_de_texto_—_cadenas_en_JavaScript">{{LearnSidebar}}</p>

<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</div>

<p class="summary"><span id="result_box" lang="es"><span>A continuación, centraremos nuestra atención en las </span></span>cadenas<span lang="es"><span> de caracteres (<code>string</code>s)</span></span><span lang="es"><span>: así es como se llaman los fragmentos de texto en programación.</span> <span>En este artículo veremos todas las cosas comunes que realmente deberías saber sobre </span></span>cadenas<span lang="es"><span> de caracteres al aprender JavaScript, como crear cadenas, comillas en cadenas y unir cadenas.</span></span></p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerequisitos:</th>
   <td>Conocimientos básicos de informática, una comprensión básica de HTML y CSS y de lo que es JavaScript.</td>
  </tr>
  <tr>
   <th scope="row">Objectivo:</th>
   <td><span id="result_box" lang="es"><span>Familiarizarte con los aspectos básicos de las </span></span>cadenas<span lang="es"><span> de caracteres en JavaScript.</span></span></td>
  </tr>
 </tbody>
</table>

<h2 id="El_poder_de_las_palabras"><span class="short_text" id="result_box" lang="es"><span>El poder de las palabras</span></span></h2>

<p>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. {{glossary("HTML")}} proporciona estructura y significado a nuestro texto, {{glossary("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.</p>

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

<h2 id="Cadenas_—_las_bases">Cadenas — las bases</h2>

<p>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 familiarizarnos. Te proveeremos de una aquí abajo (también puedes <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">abrir la consola</a> en una pestaña o ventana separada, o usar la <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">consola de desarrollo del navegador</a> si así lo prefieres).</p>

<div class="hidden">
<h6 id="Hidden_code">Hidden code</h6>

<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Consola JavaScript&lt;/title&gt;
    &lt;style&gt;
      * {
        box-sizing: border-box;
      }

      html {
        background-color: #0C323D;
        color: #809089;
        font-family: monospace;
      }

      body {
        max-width: 700px;
      }

      p {
        margin: 0;
        width: 1%;
        padding: 0 1%;
        font-size: 16px;
        line-height: 1.5;
        float: left;
      }

      .input p {
        margin-right: 1%;
      }

      .output p {
        width: 100%;
      }

      .input input {
        width: 96%;
        float: left;
        border: none;
        font-size: 16px;
        line-height: 1.5;
        font-family: monospace;
        padding: 0;
        background: #0C323D;
        color: #809089;
      }

      div {
        clear: both;
      }

    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;


  &lt;/body&gt;

  &lt;script&gt;
    var geval = eval;
    function createInput() {
      var inputDiv = document.createElement('div');
      var inputPara = document.createElement('p');
      var inputForm = document.createElement('input');

      inputDiv.setAttribute('class','input');
      inputPara.textContent = '&gt;';
      inputDiv.appendChild(inputPara);
      inputDiv.appendChild(inputForm);
      document.body.appendChild(inputDiv);

      if(document.querySelectorAll('div').length &gt; 1) {
        inputForm.focus();
      }

      inputForm.addEventListener('change', executeCode);
    }

    function executeCode(e) {
      try {
        var result = geval(e.target.value);
      } catch(e) {
        var result = 'error — ' + e.message;
      }

      var outputDiv = document.createElement('div');
      var outputPara = document.createElement('p');

      outputDiv.setAttribute('class','output');
      outputPara.textContent = 'Resultado: ' + result;
      outputDiv.appendChild(outputPara);
      document.body.appendChild(outputDiv);

      e.target.disabled = true;
      e.target.parentNode.style.opacity = '0.5';

      createInput()
    }

    createInput();

  &lt;/script&gt;
&lt;/html&gt;</pre>
</div>

<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>

<h3 id="Creando_una_cadena">Creando una cadena</h3>

<ol>
 <li>Para comenzar, ingresa las siguientes líneas:
  <pre class="brush: js notranslate">var string = 'La revolución no será televisada.';
string;</pre>
  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.</li>
 <li>Si no lo haces, u olvidas una de las comillas, obtendrás un error. Intenta ingresando las siguientes líneas:
  <pre class="brush: js example-bad notranslate">var malString = Esto es una prueba;
var malString = 'Esto es una prueba;
var malString = Esto es una prueba';</pre>
  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.</li>
 <li>Lo siguiente funcionará si previamente definiste la variable <code>string</code> — inténtalo:
  <pre class="brush: js notranslate">var maltring = string;
malString;</pre>
  <code>malString</code> ahora tiene el mismo valor que <code>string</code>.</li>
</ol>

<h3 id="Comillas_simples_vs._comillas_dobles">Comillas simples vs. comillas dobles</h3>

<ol>
 <li>En JavaScript, puedes escoger entre comillas simple y dobles para envolver tus cadenas. Ambas funcionarán correctamente:
  <pre class="brush: js notranslate">var simp = 'Comillas simples.';
var dobl = "Comillas dobles.";
simp;
dobl;</pre>
 </li>
 <li>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:
  <pre class="brush: js example-bad notranslate">var badQuotes = 'What on earth?";</pre>
 </li>
 <li>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:
  <pre class="brush: js notranslate">var sglDbl = 'Would you eat a "fish supper"?';
var dblSgl = "I'm feeling blue.";
sglDbl;
dblSgl;</pre>
 </li>
 <li>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:
  <pre class="brush: js example-bad notranslate">var bigmouth = 'I've got no right to take my place...';</pre>
  Lo que nos lleva directamente al siguiente tema.</li>
</ol>

<h3 id="Escapando_caracteres_en_una_cadena">Escapando caracteres en una cadena</h3>

<p>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:</p>

<pre class="brush: js notranslate">var bigmouth = 'I\'ve got no right to take my place...';
bigmouth;</pre>

<p>Ahora funciona correctamente. Puedes escapar otros caracteres de la misma forma, ej. <code>\"</code>, y hay varios códigos más. Ve a <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation">Notación de Escape</a> para más detalles.</p>

<h2 id="Concatenando_cadenas">Concatenando cadenas</h2>

<ol>
 <li>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.
  <pre class="brush: js notranslate">var one = 'Hello, ';
var two = 'how are you?';
var joined = one + two;
joined;</pre>
  El resultado de este código es una variable llamada <code>joined</code>, que contiene el valor: "Hello, how are you?" ("Hola, cómo estas?").</li>
 <li>En la última instancia del código, unimos dos strings, pero lo puedes hacer con cuantas desees, mientras que incluyas el símbolo de <code>+</code> entre ellas. Prueba esto:
  <pre class="brush: js notranslate">var multiple = one + one + one + one + two;
multiple;</pre>
 </li>
 <li>También puedes usar una combinación de variables y strings reales. Prueba esto:
  <pre class="brush: js notranslate">var response = one + 'I am fine — ' + two;
response;</pre>
 </li>
</ol>

<div class="note">
<p><strong>Nota</strong>: Cuando ingresas una string real en tu código, entre comillas simples o dobles, se llama <strong>string literal</strong>.</p>
</div>

<h3 id="La_concatenación_en_contexto">La concatenación en contexto</h3>

<p>Vamos a revisar la concatenación que usamos en la siguiente acción — veamos este ejemplo ya citado previamente en el curso:</p>

<pre class="brush: html notranslate">&lt;button&gt;Press me&lt;/button&gt;</pre>

<pre class="brush: js notranslate">var button = document.querySelector('button');

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

<p>{{ EmbedLiveSample('Concatenation_in_context', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>

<p>Aquí estamos usando una función {{domxref("Window.prompt()", "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 <code>name (nombre)</code>. Luego, en la línea 5, usamos una función {{domxref("Window.alert()", "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 <code>name (</code>nombre). </p>

<h3 id="Números_versus_cadenas">Números versus cadenas</h3>

<ol>
 <li>Entonces, ¿qué sucede cuando intentamos agregar (o concatenar) un string y un número? Vamos a probar en la consola:
  <pre class="brush: js notranslate">'Front ' + 242;
</pre>
  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. </li>
 <li>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 <code>typeof</code> para verificar si la variable es un número o una cadena):
  <pre class="brush: js notranslate">var myDate = '19' + '67';
typeof myDate;</pre>
 </li>
 <li>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:
  <ul>
   <li>El objecto {{jsxref("Number")}} convertirá cualquier cosa que se le pase en un número, si puede. Intenta lo siguiente:
    <pre class="brush: js notranslate">var myString = '123';
var myNum = Number(myString);
typeof myNum;</pre>
   </li>
   <li>Por otra parte, cada número tiene un método llamado  <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code> que convertirá el equivalente en una string. Prueba esto:
    <pre class="brush: js notranslate">var myNum = 123;
var myString = myNum.toString();
typeof myString;</pre>
   </li>
  </ul>
  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 (<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L54">Juego Adivina el número, en la línea 54</a>).</li>
</ol>

<h2 id="Prueba_tus_habilidades_2">Prueba tus habilidades</h2>

<p id="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 <a href="/es/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings">Prueba tus habilidades: Strings</a>. Ten en cuenta que esto requiere conocimiento del próximo artículo, por lo que podrías leerlo antes.</p>

<h2 id="Conclusión">Conclusión</h2>

<p>Esto es lo básico que debes saber sobre las cadenas o <code>string</code>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. </p>

<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</p>

<h2 id="En_este_módulo">En este módulo</h2>

<ul>
 <li><a href="/es/docs/Learn/JavaScript/First_steps/What_is_JavaScript">¿Qué es JavaScript?</a></li>
 <li><a href="/es/docs/Learn/JavaScript/First_steps/A_first_splash">Un primer acercamiento a JavaScript</a></li>
 <li><a href="/es/docs/Learn/JavaScript/First_steps/What_went_wrong">¿Qué salió mal? Corrigiendo JavaScript</a></li>
 <li><a href="/es/docs/Learn/JavaScript/First_steps/Variables">Guardando la información que necesitas— Variables</a></li>
 <li><a href="/es/docs/Learn/JavaScript/First_steps/Math">Matemáticas básicas en JavaScript — números y operadores</a></li>
 <li><a href="/es/docs/Learn/JavaScript/First_steps/Strings">Manejo de texto — cadenas en JavaScript</a></li>
 <li><a href="/es/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos útiles para el manejo de cadenas</a></li>
 <li><a href="/es/docs/Learn/JavaScript/First_steps/Arrays">Arreglos</a></li>
 <li><a href="/es/docs/Learn/JavaScript/First_steps/Silly_story_generator" rel="nofollow">Evaluaciones: Generador de historias absurdas</a></li>
</ul>