Variables String JavaScript ¿Mejor usar comillas simples o dobles? Secuencias escape \n \t. length (CU01114E)

Resumen: Entrega nº14 del curso "Tutorial básico del programador web: JavaScript desde cero".
Codificación aprenderaprogramar.com: CU01114E

 

 

CARACTERES Y CADENAS DE TEXTO EN JAVASCRIPT

A diferencia de otros lenguajes que diferencian un tipo de dato “carácter” (char) y otro cadena de texto (string), en JavaScript existe un único tipo para englobar tanto a caracteres como a cadenas de texto como a una cadena vacía: el tipo String.

 

logo javascript

 

VARIABLES STRING EN JAVASCRIPT

JavaScript permite definir el texto tanto dentro de comillas dobles como dentro de comillas simples. Por ejemplo es válido: var cadenaTexto; cadenaTexto =  "aprenderaprogramar.com" ;

Y también es válido: cadenaTexto =  'aprenderaprogramar.com' ;

HTML también permite usar comillas simples o dobles indistintamente. Esto puede dar lugar a problemas. Por ejemplo:

onclick ="alert("Alerta JavaScript")" sería una construcción incorrecta porque el navegador no sabe interpretar qué comillas son de apertura y cuáles de cierre.

onclick ="alert('Alerta JavaScript')" sería una construcción correcta porque el navegador determina que las comillas dobles son las externas y las comillas simples las internas.

Nosotros preferiremos usar comillas dobles para HTML y comillas simples para JavaScript, aunque no hay nada que obligue a que esto tenga que ser así.

En JavaScript siempre que se quiera indicar la presencia de un texto se puede optar por comillas dobles o simples, según se prefiera. No obstante, habrá situaciones en las que queramos que existan comillas dentro del propio texto, y en este caso tenemos la opción a usar un tipo de comillas como delimitadoras externas y otro tipo como comillas internas del texto. Por ejemplo:

cadenaTexto =  '"aprenderaprogramar.com"' ; supone que el texto está delimitado por comillas simples y que la cadena de texto contiene las comillas dobles.

cadenaTexto =  " 'aprenderaprogramar.com' " ; supone que el texto está delimitado por comillas dobles y que la cadena de texto contiene las comillas simples.

Aún así, existirán casos en que queramos que un texto contenga simultáneamente comillas simples y dobles, con lo que la solución anterior no nos resulta satisfactoria. Para resolver estas situaciones, se usa el denominado carácter backslah o carácter de escape, que es el símbolo \.

El símbolo \ se usa para resolver la representación de símbolos que no pueden ser incluidos de forma normal dentro de un texto. Cabe destacar las siguientes secuencias de escape:

Secuencia de escape

Resultado

\'

Comilla simple

\"

Comilla doble

\\

Símbolo \

\n

Nueva línea

\t

Tabulador

 

Existen más caracteres de escape pero estos son los más usuales. También es posible introducir caracteres (de escape o no) usando la codificación Latin-1 o Unicode en que se basa JavaScript, por ejemplo \u0041 representa la letra A, \u00F3 representa la letra ó, \u005C representa el carácter \ y \xA9 representa el símbolo de copyright ©, pero esta codificación en general no la utilizaremos salvo en casos muy excepcionales. Si necesitas comprobar el código de los caracteres puedes hacerlo buscando en internet “List of Unicode characters”.

El símbolo \ incluido dentro de un texto será ignorado. Para introducir el símbolo \ siempre hemos de hacerlo escapándolo usando \\.

 

 

LONGITUD DE UNA CADENA DE CARACTERES

La longitud de una cadena de caracteres expresada como un valor numérico puede obtenerse escribiendo la cadena (o el nombre de la variable que la representa) seguido de .length.

Por ejemplo "extraordinario".length devuelve 14 por contener la palabra 14 letras y "pitón".length devuelve 5 por contener la palabra 5 letras.

textoUsuario.length devolverá el número de caracteres que contenga la variable textoUsuario.

"".length devuelve cero porque "" representa una cadena vacía o con cero caracteres.

 

En general cada carácter suma una unidad a la propiedad length del texto (aunque algunos caracteres extraños suman 2 unidades por representarse concatenando dos códigos Unicode, pero esto es algo a lo que no le prestaremos atención porque en la práctica casi nunca tendremos que trabajar con este tipo de caracteres extraños).

Veamos un ejemplo. Escribe este código y guárdalo en un archivo de extensión html (puedes cambiar la ruta de la imagen si quieres):

<html>

<head>

<title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">

<script type="text/javascript">

function mostrarMensaje1() {

var textoUsuario;

var cadenaTexto;

cadenaTexto =  '\xA9 aprenderaprogramar.com' ; alert ('cadena texto vale ' + cadenaTexto);

cadenaTexto =  '"aprenderaprogramar.com"' ; alert ('cadena texto es ' + cadenaTexto);

cadenaTexto = "Letra A: \u0041, o con tilde: \u00F3 sigue Caracter \\ igualmente \u005C seguido de tres saltos de línea \n\n\n Prosigue comilla simple \' y doble \"\n\n\n"

alert ('cadena texto ahora contiene ' + cadenaTexto);

textoUsuario = prompt("Introduzca un texto por favor:");

alert ("El texto introducido fue " + textoUsuario + " con longitud de " + textoUsuario.length + " caracteres");

alert ("La longitud de extraordinario es de " + ("extraordinario".length) + " caracteres");

alert ("La longitud de la cadena vacía es de " + ("".length) + " caracteres");

}

</script>

</head>

<body>

<div>

<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>

<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">

<p onclick ="alert('Alerta JavaScript')" style="background-color:yellow;">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web.

</p>

</div>

</body>

</html>

 


Visualiza el resultado y comprueba que la página web se muestra con normalidad y que JavaScript se ejecuta con normalidad cuando pulsas sobre la imagen.

El resultado esperado es que se muestre lo siguiente (compruébalo):

cadena texto vale © aprenderaprogramar.com
cadena texto es "aprenderaprogramar.com"
cadena texto ahora contiene Letra A: A, o con tilde: ó sigue Caracter \ igualmente \ seguido de tres saltos de línea


Prosigue comilla simple ' y doble "
Introduzca un texto por favor: andamio
El texto introducido fueandamio con longitud de 7 caracteres
La longitud de extraordinario es de 14 caracteres
La longitud de la cadena vacía es de 0 caracteres

 

 

EJERCICIO

Consulta en internet cuál es el código unicode que corresponde al carácter π (símbolo matemático Pi) y usando el código muestra por pantalla el mensaje “El número π vale 3.1416”.

Para comprobar si es correcta tu solución puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

JULIO - AGOSTO 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. JavaScript, jQuery
5. .NET, C#
6. HTML, CSS
7. Android, iOS
8. Php, MySql


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación