Caracteres de continuación de línea en JavaScript

Tahseen Tauseef 15 febrero 2024
  1. Gramática léxica en JavaScript
  2. Literales de cadena en JavaScript
  3. Continuación de línea en JavaScript
  4. Implementar la continuación de línea usando un método de escape en JavaScript
  5. Implementar continuación de línea usando literales de plantilla en JavaScript
  6. Implementar la continuación de línea usando el elemento de ruptura HTML en JavaScript
Caracteres de continuación de línea en JavaScript

La gramática léxica en JavaScript se trata en este breve tutorial de JavaScript. Además, las cadenas se cubrirán en profundidad utilizando varias técnicas de línea nuevas y cómo manejar los saltos de línea cuando se trata de estas cadenas.

Gramática léxica en JavaScript

En informática, la gramática léxica es una gramática técnica que describe la sintaxis de los tokens. El programa está construido con caracteres definidos por la estructura lingüística del idioma.

El conjunto de caracteres es comparable al alfabeto de cualquier idioma escrito. El texto fuente de los scripts de ECMAScript se lee de izquierda a derecha y se convierte en una serie de componentes de entrada como tokens, caracteres de control, terminadores de línea, comentarios o espacios en blanco.

ECMAScript define palabras clave específicas, literales y reglas para insertar punto y coma después de las declaraciones.

Literales de cadena en JavaScript

Un literal de cadena es un orden de cero o más puntos de código Unicode entre comillas simples o dobles. Una secuencia de escape también puede representar puntos de código Unicode.

Excepto por los siguientes puntos de código de comillas de cierre, todos los puntos de código pueden aparecer textualmente en un literal de cadena:

  1. U+005C o \ (barra invertida),
  2. U+000D o <CR>,
  3. y U+000A o <LF>.

Cualquier punto de código puede aparecer como una secuencia de escape.

Los literales de cadena se interpretan como valores de cadena de ECMAScript. Los puntos de código Unicode están codificados en UTF-16 cuando se generan estos valores de cadena.

Continuación de línea en JavaScript

La manipulación de cadenas en JavaScript puede ser compleja. Si bien la manipulación de cadenas es fácil de dominar, es difícil implementarla y un área relacionada es agregar nuevas líneas.

Hay otras formas de insertar nuevas líneas con JavaScript, pero no son tan sencillas como el párrafo de HTML o la etiqueta de interrupción.

No obstante, veamos las formas más populares de insertar una nueva línea en JavaScript.

Implementar la continuación de línea usando un método de escape en JavaScript

En JavaScript, las secuencias de escape son una forma sistemática de crear una nueva línea. En Windows y Linux, la secuencia de escape para una nueva línea es \n; sin embargo, en algunas Mac antiguas, se usa \r.

La implementación de secuencias de escape es relativamente simple.

Ejemplo:

let data = 'Hello World';

let newstring = 'Hello \nWorld';

console.log(data);

console.log(newstring);

Producción :

"Hello World"
"Hello
World"

También puede ver el resultado del segmento de código anterior usando este enlace.

Note
No incluya espacios después de la secuencia de escape de nueva línea, ya que JavaScript los interpretará como espacios y los incluirá en la salida.

Secuencias de escape hexadecimales

Las secuencias de escape hexadecimales constan del carácter \x seguido de exactamente dos números hexadecimales que indican una unidad de código o un punto que va desde 0x0000 a 0x00FF.

Ejemplo:

'\xA9'  // "©"

Secuencias de escape Unicode

Después de \u, una secuencia de escape Unicode consiste precisamente en cuatro dígitos hexadecimales. En la codificación UTF-16, denota una unidad de código.

La unidad de código es equivalente a los puntos de código U+0000 a U+FFFF. Los puntos de código necesitan dos secuencias de escape que reflejen las dos unidades de código utilizadas para codificar el carácter; el par sustituto es único desde el punto de código.

Ejemplo:

'\u00A9'  // "©" (U+A9)

Secuencias de escape de punto de código Unicode

Una secuencia de escape de punto de código Unicode consta de \u{} con un punto de código hexadecimal. Los dígitos hexadecimales deben estar comprendidos entre 0 y 0x10FFFF.

No se requieren pares sustitutos para los puntos de código en U+10000 a U+10FFFF. En ECMAScript 2015, se agregaron escapes de puntos de código a JavaScript (ES6).

Ejemplo:

'\u{2F804}'  // CJK COMPATIBILITY IDEOGRAPH-2F804 (U+2F804)

// the same figure portrayed as a surrogate twin

'\uD87E\uDC04'

Implementar continuación de línea usando literales de plantilla en JavaScript

Los literales de plantilla pueden parecer complicados, pero son literales de cadena que admiten expresiones incrustadas detrás de la jerga. Facilitan el uso de cadenas multilínea.

Los acentos graves (``) se utilizan para rodear los literales de plantilla.

Ejemplo:

let data = 'Hello \nWorld';

let newstring = `Hello

World`;

console.log(data);

console.log(newstring);

Producción :

"Hello
World"
"Hello
World"

También puede ver el resultado del segmento de código anterior usando este enlace.

Se devuelve el mismo resultado en ambas situaciones del método de escape y los literales de plantilla. Sin embargo, como puede ver, los literales de plantilla facilitan la escritura de cadenas de varias líneas.

Implementar la continuación de línea usando el elemento de ruptura HTML en JavaScript

Otra forma de crear una nueva línea en JavaScript es incluir los elementos de salto de línea HTML en su cadena.

Es importante tener en cuenta que los elementos de ruptura solo deben usarse cuando la división de una línea es significativa. Sin embargo, debido a que esta estrategia es muy frecuente, también la analizaremos.

Ejemplo:

<html>

<body>

<p id="newline"></p>

<script>

let data = "Hello" + "<br>" + "World ";

document.getElementById("newline").innerHTML = data;

</script>

</body>

</html>

Producción:

Continuación de línea de Javascript - Salida

Nota
Recuerde utilizar .innerHTML y no .innerText como lo haría con otro contenido de texto.

También puede ver el resultado del segmento de código anterior usando este enlace.