JavaScript V Tipos de valores y operadores II

25/3/2018

Esta semana continuamos estudiando valores y operadores en JavaScript, hoy llega el turno a las cadenas, las cuales en JavaScript son uno de los componentes más importantes y probablemente los más usados frente a cualquier otro tipo de dato.

Las cadenas las empleamos también como parámetros cuando se invoca aplicaciones AJAX del lado del servidor o crear el formato de serialización básica de todos los objetos JavaScript.

Las cadenas en JavaScript pueden ser tanto un tipo de dato primitivo o un objeto.

Cadenas

Ahora vamos a ver el valor cadena: se usan para representar datos de texto (ya sean almacenados o manipulados). JavaScript utiliza 16 bits por elemento de cadena.

<!DOCTYPE html>
<html>
<body>

<h2>¿Qué es una cadena?</h2>

                <p id="ejemplo_1"></p>

<script>

                var a = "Un texto como este es una cadena";

                /* En la var a que significa la variable a, como hemos visto antes,
                las dobles comillas indican que el valor asignado con el operador =
                es una cadena*/

                document.getElementById("ejemplo_1").innerHTML = a;

</script>

</body>
</html>

¿Qué es una cadena?

Ejemplo 1

Literales de cadena

Como sabemos el tipo de dato cadena de caracteres permite representar texto haciendo uso de las comillas, ya sean simples o dobles. Una cadena en JavaScript es cero (un espacio) o más caracteres escritos dentro de unas comillas.

‘como podemos ver sirven comillas simples’
“y comillas dobles”

Veamos un ejemplo:

<!DOCTYPE html>
<html>
<body>

<h2>Cadenas y más cadenas</h2>

<p>Veamos el uso de que comillas podemos valernos para la fabricación de nuestras cadenas</p>

<p id="ejemplo_2"></p>

<script>

var astro1 = "Sol"; // Comillas dobles
var astro2 = 'Tierra'; // Comillas simples

document.getElementById("ejemplo_2").innerHTML =
astro1 + astro2;

</script>

</body>
</html>

Cadenas y más cadenas

Veamos el uso de que comillas podemos valernos para la fabricación de nuestras cadenas

Ejemplo 2

Como podemos observar en el ejemplo 2, en la creación de cadenas se pueden usar las comillas simples y comillas dobles.

En el ejemplo Sol y Tierra están juntos añadamos el espacio, porque como dijimos una cadena también puede ser un espacio.

<!DOCTYPE html>
<html>
<body>

<h2>Cadenas y más cadenas</h2>

<p>Veamos el uso de que comillas podemos valernos para la fabricación de nuestras cadenas</p>

<p id="ejemplo_2"></p>

<script>

var astro1 = "Sol"; // Comillas dobles
var astro2 = 'Tierra'; // Comillas simples

document.getElementById("ejemplo_2").innerHTML =
astro1 + " " + astro2;

</script>

</body>
</html>

Cadenas y más cadenas

Veamos el uso de que comillas podemos valernos para la fabricación de nuestras cadenas

Ejemplo 3

Mejor así

El uso de las comillas dentro de una cadena, se puede usar, mientras sean distintas a las que crean la cadena, este sería un ejemplo que abarcaría distintas combinaciones:

<!DOCTYPE html>
<html>
<body>

<h2>Combinaciones de comillas en una cadena</h2>

<p>Dentro de una cadena se pueden añadir comillas, siempre que estas no sea as mismas que crearon la cadena</p>

<p id="Ejemplo_4"></p>

<script>

var Ejemplo1 = "I'm Mazzy";
var Ejemplo2 = "Mazzy dijo 'Yo soy Mazzy'";
var Ejemplo3 = 'Mazzy dijo "Yo soy Mazzy"';

document.getElementById("Ejemplo_4").innerHTML =
Ejemplo1 + "<br>" + Ejemplo2 + "<br>" + Ejemplo3;

</script>

</body>
</html>

Combinaciones de comillas en una cadena

Dentro de una cadena se pueden añadir comillas, siempre que estas no sean las mismas que crearon la cadena

Ejemplo 4

La longitud de una cadena es igual al número de elementos que la forman, el valor total de la longitud de una cadena nos lo puede devolver la propiedad lenght:

<!DOCTYPE html>
<html>
<body>

<h2>Veamos una propiedad que puede sernos de utilidad</h2>

<p>La propiedad length nos devolverá el valor que indica la longitud de nuestra cadena:</p>
<p>Supercalifragilísticoespialidoso</p>

<p id="ejemplo_5"></p>

<script>
var Poppins = "supercalifragilísticoespialidoso";
document.getElementById("ejemplo_5").innerHTML = Poppins.length;
</script>

</body>
</html>

Veamos una propiedad que puede sernos de utilidad

La propiedad length nos devolverá el valor que indica la longitud de nuestra cadena:

Supercalifragilísticoespialidoso

Ejemplo 5

Caracteres especiales
La mayoría de elementos se pueden representar entre las comillas, si bien algunos requieren de nosotros alguna acción más, son los caracteres especiales.

Una de las formas de indicar un carácter especial en una cadena es con la barra invertida \, la cual indica que el siguiente carácter que le sigue tiene un significado especial, esto sirve, por ejemplo:

var Mazzy = “Mazzy dice “Yo soy Mazzy”.”;

En línea de arriba, la frase “Yo soy Mazzy” quedaría mal interpretada no mostrando nada.

La forma de expresar esto sería con la barra invertida \, que indicaría en este caso que las “son un carácter especial la secuencia sería:

var Mazzy = “Mazzy dice \“Yo soy Mazzy\”.”;

Por lo tanto, para que los caracteres especiales se conviertan en valores de cadena deben quedar de la siguiente manera:

<!DOCTYPE html>
<html>
<body>

<h2>Cadenas y carateres especiles</h2>

<p>Veamos otra manera de usar las comillas dentro de una cadena</p>

<p id="ejemplo_6"></p>

<script>

var Mazzy = "Mazzy dice \"Yo soy Mazzy\".";

document.getElementById("ejemplo_6").innerHTML =
Mazzy;

</script>

</body>
</html>

Cadenas y carateres especiales

Veamos otra manera de usar las comillas dentro de una cadena

Ejemplo 6

\’ para conseguir una comilla simple

<!DOCTYPE html>
<html>
<body>

<h2>Cadenas y carateres especiales</h2>

<p>Y otra manera de usar las comillas dentro de una cadena</p>

<p id="ejemplo_7"></p>

<script>

var Mazzy2 = 'I\'m Mazzy';

document.getElementById("ejemplo_7").innerHTML =
Mazzy2;

</script>

</body>
</html>

Cadenas y carateres especiales

Y otra manera de usar las comillas dentro de una cadena

Ejemplo 7

¿Qué hacemos si queremos que una barra invertida en una cadena sea una barra invertida?

Si se da la situación de que en la cadena que estamos escribiendo necesitamos una barra invertida, y no un código especial, solo debemos repetirla, la primera indica como antes dijimos que el siguiente carácter es especial dejando la segunda barra invertida visible en la cadena, como antes explicamos con las comillas.

<!DOCTYPE html>
<html>
<body>

<h2>Cadenas y carateres especiales</h2>

<p>Coloquemos una barra invertida dentro de una cadena</p>

<p id="ejemplo_8"></p>

<script>

var Texto = "Este es un texto de pruebas para probar \\ distintos caracteres especiales";

document.getElementById("ejemplo_8").innerHTML =
Texto;

</script>

</body>
</html>

Cadenas y carateres especiales

Coloquemos una barra invertida dentro de una cadena

Ejemplo 8

Nota
Hay diferentes tipos de caracteres especiales, si bien nos hemos centrado en estos tres, por ser los más utilizados aunque las comillas ya habíamos explicado una forma, ya analizaremos otros más adelante.

Las cadenas como objetos JavaScript

La mayor parte de las veces las cadenas de JavaScript son valores primitivos, creados a partir de literales, pero esto podemos cambiarlo y definir una cadena como un objeto.

var bebida1 = "cafe"; // Esto es una cadena

var bebida2 = new String ("cafe"); //esto es un objeto

<!DOCTYPE html>
<html>
<body>

<h2>Cadenas vs objetos</h2>

<p>new String() convierte una cadena en un objeto</p>

<p id="ejemplo_9_2"></p>

<p id="ejemplo_9"></p>

<script>
var bebida1 = "café"; // bebida1 es una cadena
var bebida2 = new String("café"); // bebida2 es un objeto

document.getElementById("ejemplo_9_2").innerHTML =
bebida1 + " o " + bebida2;

document.getElementById("ejemplo_9").innerHTML =
typeof bebida1 + " o " + typeof bebida2;
</script>

</body>
</html>

Cadenas vs objetos

new String() convierte una cadena en un objeto

Ejemplo 9

Vamos a comparar con == y ===

Ahora usaremos el operador ==, para comparar dos cadenas, este solo compara el valor el cual en este caso será el mismo devolviendo un true (verdadero).

<!DOCTYPE html>
<html>
<body>

<h2>Cadenas vs objetos</h2>

<p>Si comparamos con == bebida1 (cadena) con bebida2 (objeto)</p>

<p id="ejemplo_10"></p>

<p id="ejemplo_10_2"></p>

<script>
var bebida1 = "café"; // bebida1 es una cadena
var bebida2 = new String("café"); // bebida2 es un objeto

document.getElementById("ejemplo_10").innerHTML =
(bebida1 == bebida2);

document.getElementById("ejemplo_10_2").innerHTML =
typeof bebida1 + " o " + typeof bebida2;
</script>

</body>
</html>

Cadenas vs objetos

Si comparamos con == bebida1 (cadena) con bebida2 (objeto)

Ejemplo 10

Este operador ===, detectará que las cadenas no son iguales, porque comparará el tipo y el valor. Dando en el ejemplo 11 un valor false (falso).

<!DOCTYPE html>
<html>
<body>

<h2>Cadenas vs objetos</h2>

<p>Si comparamos con === bebida1 (cadena) con bebida2 (objeto)</p>

<p id="ejemplo_11"></p>

<p id="ejemplo_11_2"></p>

<script>
var bebida1 = "café"; // bebida1 es una cadena
var bebida2 = new String("café"); // bebida2 es un objeto

document.getElementById("ejemplo_11").innerHTML =
(bebida1 === bebida2);

document.getElementById("ejemplo_11_2").innerHTML =
typeof bebida1 + " o " + typeof bebida2;
</script>

</body>
</html>

Cadenas vs objetos

Si comparamos con === bebida1 (cadena) con bebida2 (objeto)

Ejemplo 11

Si las dos variables del ejemplo anterior, las convertimos ambas en objetos observemos que sucede.

<!DOCTYPE html>
<html>
<body>

<h2>Cadenas vs objetos</h2>

<p>Si comparamos con == bebida1 (cadena) con bebida2 (objeto)</p>

<p id="ejemplo_12"></p>

<p id="ejemplo_12_2"></p>

<script>
var bebida1 = new String("café"); // bebida1 es un objeto
var bebida2 = new String("café"); // bebida2 es un objeto

document.getElementById("ejemplo_12").innerHTML =
(bebida1 == bebida2);

document.getElementById("ejemplo_12_2").innerHTML =
typeof bebida1 + " o " + typeof bebida2;
</script>

</body>
</html>

Cadenas vs objetos

Si comparamos con == bebida1 (cadena) con bebida2 (objeto)

Ejemplo12

<!DOCTYPE html>
<html>
<body>

<h2>Cadenas vs objetos</h2>

<p>Si comparamos con === bebida1 (cadena) con bebida2 (objeto)</p>

<p id="ejemplo_13"></p>

<p id="ejemplo_13_2"></p>

<script>
var bebida1 = new String("café"); // bebida1 es un objeto
var bebida2 = new String("café"); // bebida2 es un objeto

document.getElementById("ejemplo_13").innerHTML =
(bebida1 === bebida2);

document.getElementById("ejemplo_13_2").innerHTML =
typeof bebida1 + " o " + typeof bebida2;
</script>

</body>
</html>

Cadenas vs objetos

Si comparamos con === bebida1 (cadena) con bebida2 (objeto)

Ejemplo 13

Tanto en el ejemplo 12 y en el 13 nos devolverá un valor false (falso)

Concatenación de una cadena

Las cadenas no se pueden ni multiplicar, dividir ni restar, pero con el operador + las cadenas se pueden juntar dos o más cadenas creando así una cadena más grande, suma de los datos combinados de otras cadenas:

“orni” + “to” + “rrin” + “co”

Se nos mostraría así:

Ornitorrinco

Y hasta aquí esta semana volvemos pronto con más código ?

Manuel Castelló (kasmangou)

Temas relacionados: Programación, kasmangou, JavaScript, Taller

Reconocimientos y más información sobre la obra gráfica
ADVERTENCIA: En este foro, no se admitirán por ninguna razón el lenguaje soez y las descalificaciones de ningún tipo. Se valorará ante todo la buena educación y el rigor sobre el tema a tratar, así que nos enorgullece reconocer que rechazaremos cualquier comentario fuera de lugar.

0 Comentarios