Novedades ES6

Funciones con parámetros Rest

Operador Spread

Arrow Functions

Nombres de métodos abreviados

Declaración de clases

Herencia en ES6

Definición de Getters y Setters

Definición de métodos estáticos

Estructura repetitiva 'for of'

Modulos en ES6

Map en ES6

Set en ES6

WeakSet y WeakMap en ES6

Novedades de ES6 en Arrays

Novedades en ES6 - API fetch

Mas expresiones regulares

Las expresiones regulares son patrones que se utilizan para hacer coincidir combinaciones de caracteres en cadenas. En JavaScript, las expresiones regulares también son objetos. Estos patrones se utilizan con los métodos exec() y test() de RegExp, y con match(), matchAll(), replace(), replaceAll(), search() y split() métodos de String. Este capítulo describe las expresiones regulares de JavaScript.

Metacaracteres de cuantificadores alternativos * ? +

La sintaxis de las expresiones regulares define tres metacaracteres que pueden utilizarse en lugar de la sintaxis vista en el concepto anterior.

Caracteres:

? busca cero o una ocurrencia en el string remplaza a {0,1}
* busca cero o más ocurrencias en el string remplaza a {0,}
+  busca una o más ocurrencias en el string remplaza a {1,}

Problema

Ingresar una palabra por teclado y validar que tenga al menos una vocal.

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var palabra=prompt('Ingrese una palabra con al menos una vocal:','');
  var patron=/[aeiou]+/;
  if (patron.test(palabra))
    document.write('La palabra ingresada tiene al menos una vocal');
  else
    document.write('La palabra ingresada no tiene vocales');
</script>
  
</body>
</html>

Ver ejemplo anterior

La expresión regular planteada utiliza el metacaracter + :

  var patron=/[aeiou]+/;

Con esto se analiza cada letra del string y si al menos uno tiene una vocal luego el método test de la expresión regular se verifica verdadera.

Utilizando la otra sintaxis la expresión sería:

  var patron=/[aeiou]{1,}/;

Problema

Ingresar un valor numérico entero que podemos opcionalmente antecederle alguno de los caracteres: + o -.

<html>
<head>
</head>
<body>

<script type="text/javascript">
  var valor=prompt('Ingrese un valor numérico entero, puede anteceder el +/-:','');
  var patron=/^[\+\-]?[0-9]+$/;
  if (patron.test(valor))
    document.write('Tiene un formato correcto');
  else
    document.write('Formato incorrecto');
</script>

</body>
</html>

Ver ejemplo anterior

El patrón queda definido con la siguiente sintaxis:

  var patron=/^[\+\-]?[0-9]+$/;

Es decir con la sintaxis ^[\+\-]? estamos indicando que el primer carácter debe ser un + o - y como fuera de los corchetes indicamos el carácter ? que indica que busca cero o una ocurrencia (es decir es opcional disponer el + o -)
Luego indicamos con la sintaxis [0-9]+$ que se debe ingresar uno o más dígitos (con es +) y debe finalizar con un dígito.

Es test se verifica correcto si ingresamos:

1200
+300
-55

e incorrecto si ingresamos:

10z55
+34aa2
+-20
+++34

Problema

Ingresar un valor numérico entero o real, se debe validar que se ingrese al menos un número previo al operador punto que es opcional y finalizar con un número obligatoriamente.

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var valor=prompt('Ingrese un valor numérico entero o real:','');
  var patron=/^[0-9]+\.?[0-9]+$/;
  if (patron.test(valor))
    document.write('Tiene un formato correcto');
  else
    document.write('Formato incorrecto');
</script>
  
</body>
</html>

Ver ejemplo anterior

La expresión comienza con ^[0-9]+ lo que significa que se debe ingresar en la primer posición un dígito. Luego es opcional el carácter . ya que empleamos el metacaracter de interrogación \.? y finalmente debe terminar con un dígito obligatoriamente [0-9]+$

Expresiones regulares abreviadas: \d \w \s \D \W

Hay patrones de búsqueda que son de uso muy frecuente como buscar dígitos por lo que se creó una sintaxis abreviada:

Código	Equivalente
\d      [0-9]
\D      [^0-9]
\w      [a-zA-Z0-9_]
\W      [^a-zA-Z0-9_]
\s	espacio en blanco

Tener en cuenta que estos caracteres son las iniciales de decimal, word y space.

Problema

Verificar si un número ingresado por teclado tiene exactamente 5 dígitos.

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var valor=prompt('Ingrese un valor numérico de 5 dígitos','');
  var patron=/^\d{5}$/;
  if (patron.test(valor))
    document.write('Tiene 5 dígitos');
  else
    document.write('No tiene 5 dígitos');
</script>
  
</body>
</html>

Ver ejemplo anterior

La expresión regular en lugar de utilizar los corchetes de valores opcionales utilizamos el carácter de escape y la d:

 var patron=/^\d{5}$/;

Es más corto y legible que utilizar:

  var patron=/^[0-9]{5}$/;

Problema

Ingresar una oración y mostrar un mensaje si tiene al menos una palabra de 4 caracteres.

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var oracion=prompt('Ingrese una oracion','');
  var patron=/\s?\w{4}\s?/;
  if (patron.test(oracion))
    document.write('Tiene al menos una palabra de 4 caracteres');
  else
    document.write('No tiene una palabra de 4 caracteres');
</script>
  
</body>
</html>

Ver ejemplo anterior

El patrón queda definido con la siguiente sintaxis:

  var patron=/\s?\w{4}\s?/;

Es decir debe ingresarse posiblemente un espacio en blanco (el cuantificador ? debemos utilizarlo porque la palabra puede estar al principio del string y no tener un espacio en blanco antes de la primer letra), seguidamente 4 caracteres y posiblemente un espacio en blanco (el cuantificador ? debemos utilizarlo porque la palabra puede estar al final del string y no tener un espacio en blanco después de la última letra)

Expresiones regulares: alternancia |

Permite analizar entre varias opciones posibles. El carácter de alternancia es el |.

Ejemplos de sintaxis para alternancia entre opciones:

  [uno|dos|tres]
  [a|e]
  [hombre|mujer]

Problema

Validar el ingreso de un típo y nro de factura. Para que sea correcto el primer carácter debe ser a,b o c y el nro debe tener uno o más dígitos.

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var factura=prompt('Ingrese tipo y nro de factura:','');
  var patron=/^[a|b|c]\d+$/;
  if (patron.test(factura))
    document.write('Se ingresó un tipo y nro de factura correcta');
  else
    document.write('Se ingresó un tipo y nro de factura incorrecta');
</script>
  
</body>
</html>

Ver ejemplo anterior

La expresión regular queda definida como:

  var patron=/^[a|b|c]\d+$/;

Es decir debe comenzar con un carácter a,b o c, seguido de uno dígitos.

Problema

Validar si una palabra comienza con los caracteres va o ba

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var palabra=prompt('Ingrese una palabra que comience con va o ba:','');
  var patron=/^[va|ba]/;
  if (patron.test(palabra))
    document.write('La palabra comienza con va o ba');
  else
    document.write('La palabra no comienza con va o ba');
</script>
  
</body>
</html>

Ver ejemplo anterior

Expresiones regulares: metacarácter punto

El metacarácter punto hace coincidir con cualquier carácter menos el salto de línea.

Por ejemplo si queremos validar el ingreso de cualquier cadena de 5 caracteres que comience con a y finalice con a podemos plantear la siguiente expresión regular:

  var patron=/^a...a$/;

Estamos indicando que la cadena debe comenzar con una letra a luego hemos dispuesto tres metacaracteres punto donde se verifican verdadero cualquiera sea el carácter del string y finalmente indicamos que finaliza con la letra a.

El programa para probarlo es:

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var cadena=prompt('Ingrese una cadena de cinco caracteres que comience y finalice con a','');
  var patron=/^a...a$/;
  if (patron.test(cadena))
    document.write('cadena correcta');
  else
    document.write('cadena incorrecta');
</script>
  
</body>
</html>

Ver ejemplo anterior

Podemos utilizar un cuantificador para no repetir tres veces el metacarácter punto:

  var patron=/^a.{3}a$/;

Es importante recordar que siempre que necesitemos utilizar alguno de los metacaracteres como dato a buscar es necesario escaparlo con la barra invertida, por ejemplo si queremos verificar si un número tiene el formato 999.99:

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var nro=prompt('Ingrese un número con el formato 999.99','');
  var patron=/^\d{3}\.\d{2}$/;
  if (patron.test(nro))
    document.write('nro correcto');
  else
    document.write('nro incorrecto');
</script>
  
</body>
</html>

Ver ejemplo anterior

Es fundamental escapar el carácter punto \.

Esta expresión la podemos leer: debe comenzar con 3 dígitos obligatoriamente, luego un punto y finalmente dos dígitos.

Expresiones regulares: metacarácter punto

Los paréntesis abiertos y cerrados pueden tener varios significados en las expresiones regulares. El fundamental es el agrupar una parte de la expresión regular y aplicarle operaciones como |, *, +, ? etc.

Problema

Elaborar una expresión regular que permita validar si se ingresó correctamente un valor entero o real y que eventualmente lleve el caracter + o - al principio. Validar que si se ingresa la coma debe ingresarse la parte real

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var nro=prompt('ingrese un número entero o real:','');
  var patron=/^[+-]?\d+(\,\d+)?$/;
  if (patron.test(nro))
    alert('Correcto');
  else
    alert('Incorrecto');
</script>
  
</body>
</html>

Ver ejemplo anterior

Podemos analizar esta expresión regular:

  var patron=/^[+-]?\d+(\,\d+)?$/;

Como la coma y la parte decimal son opcionales los encerramos entre paréntesis y lo finalizamos con el cuantificador '?'
Esto hace que cuando se ingresa la coma deba ingresarse uno o más dígitos obligatoriamente ya que los agrupamos mediante los paréntesis.

Problema

Ingresar una hora con el formato hh:mm:ss, plantear una expresión regular que valide si es correcta.

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var hora=prompt('ingrese una hora con el formato hh:mm:ss','');
  var patron=/^(0[1-9]|1\d|2[0-3]):([0-5]\d):([0-5]\d)$/;
  if (patron.test(hora))
    alert('Correcto');
  else
    alert('Incorrecto');
</script>
  
</body>
</html>

Ver ejemplo anterior

Analicemos un poco como hemos agrupado cada uno de las secciones de la hora:

  var patron=/^(0[1-9]|1\d|2[0-3]):([0-5]\d):([0-5]\d)$/;

La parte inicial puede tomar un valor entre 0 y 23:

(0[1-9]|1\d|2[0-3])

Utilizamos el metacarácter | para permitir ingresar el cero seguido de un valor entre 1 y 9, o el valor 1 y cualquier dígito, o el dos seguido del dígito 0,1,2, o 3.

Luego debe ingresarse el caracter dos puntos.

La parte de los segundos queda definida por el patrón ([0-5]\d) es decir un valor entre 0 y 5 seguido de cualquier dígito.

Finalmente los segundos es similar a los minutos: ([0-5]\d)