Introducción a Buffer en JavaScript

Datos binarios.

Para poder tratar los flujos TCP, leer y escribir en el sistema de
archivos, es necesario tratar con flujos de datos que son puramente
binarios. Los datos, como regla general, se presentan internamente como
octetos, (8 bits). Un octeto o byte es una pequeña unidad de datos con
un valor numérico entre 0 y 255 (256 valores). Los valores numéricos se
pueden representar en la notación normal (decimal), pero también se
pueden usar otras presentaciones, como la octal (base 8) o la
hexadecimal (base 16).

Búfer. ArrayBuffer en JavaScript.

Un búfer es una región de almacenamiento ubicada en la memoria física
que es utilizada para almacenar temporalmente una cierta cantidad de
datos, octetos, mientras se mueven de un lugar a otro. En Node.js esta
memoria intermedia corresponde a memoria bruta asignada fuera del montón
(“heap”) de V8.

En JavaScript para representar un búfer genérico se usa el objeto
“ArrayBuffer”, que en definitiva es un área de memoria reservada donde
se almacenará un conjunto datos binarios. Esta área es de tamaño fijo y
no puede incrementarse ni reducirse dinámicamente. No se puede trabajar
directamente con esta área reservada, ya que no existen métodos o
funciones que sean capaces de acceder directamente al “ArrayBuffer”,
para poder trabajar y acceder a esos datos ubicados en memoria, desde
JavaScript puro, es necesario utilizar el objeto “TypedArray” o el
objeto “DataView” que funcionan como una vista de los datos contenidos
en un “ArrayBuffer”.

Estas matrices tipadas, son similares a un “array” de enteros que no
puede redimensionarse. El “tipo” se refiere a una “vista” concreta de
ese búfer como pueden ser: números enteros sin signo de 8 bits, números
enteros de 32 bits, coma flotante de 64 bits, etc.

• “Int8Array”: entero de 8-bit con signo
• “Uint8Array”: entero de 8-bit sin signo
• “Uint8ClampedArray”: entero de 8-bit sin signo restringido a valores entre 0 y 255
• “Int16Array”: 2 enteros de 16-bit con signo
• “Uint16Array”: 2 enteros de 16-bit sin signo
• “Int32Array”: 4 enteros de 32-bit con signo
• “Uint32Array”: 4 enteros de 32-bit sin signo
• “Float32Array”: 4 coma flotante de 32-bit
• “Float64Array”: 8 coma flotante de 64-bit

Sobre un mismo “ArrayBuffer” podemos establecer una o más vistas de
matrices tipadas. Cada una de las matrices trabajará sobre el mismo
búfer, y cada una de ellas tratará los datos según el tipo de datos que
tienen definidos. Hay que tener en cuenta, cuando se almacena más de un
byte, si el entorno es BE (Big-endian) o LE (Little-endian). LE
considera el byte menos significativo en primera posición, en BE el byte
más significativo se almacena en primera posición.

En el siguiente ejemplo creamos un “ArrayBuffer” de 2 bytes y creamos
dos matrices con tipo sobre el mismo búfer de datos, una de enteros de 8
bits sin signo y otra de enteros de 16 bits sin signo.

Codigo disponible en el archivo buffer1.js GitHub

Usamos la vista de un entero 8 bits, para asignar los valores al primer
y segundo byte. En el primer octeto guardamos el valor 255 en binario
‘11111111’ en el segundo byte guardamos el valor 128 en binario
‘10000000’.

Cuando se visualiza el valor contenido en el “ArrayBuffer” desde la
vista de 16 bits, en un entorno LE, considera que el primer byte es el
menos significativo y el segundo byte el más significativo por lo el
valor obtenido es el siguiente 1000000011111111 que es 33023 en decimal.
En un entorno BE el valor decimal sería 65408 en binario
1111111110000000.

const memoria = new ArrayBuffer(2);
const vista8 = new Uint8Array(memoria);
const vista16 = new Uint16Array(memoria);
vista8[0] = 255; //11111111
vista8[1] = 128; //10000000
console.log(vista8); //Uint8Array [ 255, 128 ]
//LE byte menos significativo 1º
console.log(vista16, vista16[0].toString(2)); //Uint16Array [ 33023 ] '1000000011111111'

Si modificamos el valor desde la vista de 16 evidentemente también
cambia los valores para la vista de 8. Si asignamos el valor 65408 en
binario 1111111110000000 se puede observar cómo ha cambiado la vista de
8, al ser un entorno LE el byte menos significativo “10000000” (128
decimal) se coloca en primera posición el más significativo en segunda
posición “11111111” (255 en decimal). Si asignamos cualquier otro valor
desde la vista de 16, por ejemplo 1000 pasaría lo mismo.

vista16[0] = 65408; //1111111110000000
console.log(vista16); //Uint16Array [ 65408 ]
console.log(vista8, vista8[0].toString(2),vista8[1].toString(2)); 
//Uint8Array [ 128, 255 ] '10000000' '11111111'

vista16[0] = 1000; //0000001111101000
console.log(vista16); //Uint16Array [ 1000 ]
console.log(vista8, vista8[0].toString(2),vista8[1].toString(2)); 
//Uint8Array [ 232, 3 ] '11101000' '11'

Codificación y juego de caracteres.

Como se ha explicado anteriormente cada octeto de información contiene
un valor numérico. Para poder representar los caracteres, hay que
establecer una correspondencia entre el valor numérico del octeto y un
carácter en función de alguna tabla de mapeo (codificación). Un
repertorio de caracteres especifica una colección de caracteres,
como "a", "!" Y "ä". Los códigos de carácter son códigos numéricos
definidos para los caracteres de un repertorio. Una codificación de
caracteres define cómo las secuencias de códigos numéricos son
asignadas a las secuencias de octetos.

Codificación de caracteres. Estándares.

ASCII 7 bits

Una de las primeras codificaciones en aparecer fue ASCII (American
Standard Code for Information Interchange). La codificación, ASCII usa 7
bits por lo que dispone de 128 valores posibles que van desde el 0000000
a 1111111, cada número de código se presenta como un octeto con el mismo
valor y representa un carácter. ASCII tiene espacio suficiente para
todas las minúsculas y mayúsculas de las letras latinas y para cada
dígito numérico, signos de puntuación comunes, espacios y otros
caracteres de control. Empieza en el código 32 (asignado al espacio en
blanco) y termina en el 126 (asignado a el carácter tilde ~). Las
posiciones del 0 a 31 y 127 están reservadas para códigos de control. La
mayoría de los códigos de caracteres actualmente en uso contienen ASCII
como su subconjunto en algún sentido, los octetos que contienen valores
del 128 al 255 no se usan en ASCII.

Codificaciones de 8 bits

Mediante 8 bits se puede representar hasta el número 255 (256 valores),
por lo que se puede tener un conjunto de caracteres más amplios, ASCII
solo asigna hasta 127, los otros valores del 128 a 255 son de repuesto,
aprovechando estos valores de repuesto aparecieron diferentes códigos de
caracteres que fueron creados para adaptarse a los diferentes idiomas.
Estos código de caracteres son una extensión del ASCII, los más
importantes son los pertenecientes a la familia ISO 8859 y el juego de
caracteres de Windows. Los códigos ISO 8859 amplían el repertorio ASCII
de diferentes maneras con diferentes caracteres especiales utilizados en
diferentes idiomas y culturas. Las posiciones del código 0 - 127
contienen el mismo carácter que en ASCII, las posiciones 128 - 159 no se
usan (reservadas para los caracteres de control), y las posiciones 160 -
255 son la parte variable, utilizada de manera diferente en diferentes
miembros de la familia ISO 8859. ISO 8859-1 alias “Latín 1” contiene
varios caracteres acentuados y otras letras necesarias para escribir
idiomas de Europa occidental y algunos caracteres especiales. El juego
de caracteres de Windows, es similar a la familia ISO 8859, la principal
diferencia es que algunas de las posiciones del rango 128 a 159 se
asignan a caracteres imprimibles, como las comillas dobles, comillas
simples etc., en el rango de 160-255 se mantienen las mismas
asignaciones de caracteres que en ISO 8859 aunque no siempre, existiendo
así diferentes páginas de código (CP), que difieren del estándar ISO
8859 correspondiente.

ISO 10646, Unicode y UTF-8.

Las anteriores codificaciones de caracteres eran limitadas y no podían
contener suficientes caracteres para abarcar todos los idiomas del
mundo, además entraban en conflicto, pues dos codificaciones podrían
usar el mismo número o código para dos caracteres diferentes, o usar
números diferentes para el mismo carácter. Si se quiere codificar todos
los caracteres del mundo asignando a cada uno un código único no es
suficiente con los 256 valores que se pueden almacenar en un byte, para
su codificación es necesario un código multibyte.

Con este objetivo nacieron paralelamente la norma ISO 10646 y el
estándar Unicode (consorcio Unicode), que definen el Conjunto de
Caracteres Universales, (UCS), que contiene los caracteres necesarios
para representar prácticamente todos los idiomas conocidos, también
cubre una gran cantidad de símbolos gráficos, tipográficos, matemáticos
y científicos. UCS es un superconjunto de todos los demás estándares de
conjunto de caracteres. UCS y Unicode al necesitar codificación
multibyte abarca dos cosas: un conjunto de caracteres y un conjunto de
codificaciones.

• Un conjunto de caracteres:

Tablas de códigos que asignan números enteros a los caracteres. UCS le asigna a cada carácter un nombre o
“punto de código” que consiste en un número hexadecimal que representa
el valor UCS o Unicode y que suele estar precedido por la cadena "U +".
Los caracteres UCS que van desde “U+0000” a “U+007F” son idénticos a los
de US-ASCII y el rango de “U+0000” a “U+00FF” es idéntico al ISO 8859-1
(Latin-1). Además proporciona códigos para signos diacríticos y permite
que ciertas secuencias de caracteres también se pueden representar como
un solo carácter, llamado carácter pre compuesto (o compuesto, o
carácter descomponible). Por ejemplo, el carácter "ñ" puede codificarse
como el único punto de código U+00F1 "ñ" o como una secuencia compuesta
del carácter base U+006E "n" seguido del carácter no espaciador U+0303
“~”.

Los caracteres más comúnmente utilizados, incluidos todos los que se encuentran en los principales estándares de codificación anteriores, se han colocado en un primer plano (0x0000 a 0xFFFD), 64K (2^16^ ) puntos de código, que se llama plano multilingüe básico (BMP) o Plano 0.

• Un conjunto de codificaciones:

Para poder codificar todos los
caracteres de todos los idiomas utilizando varios bytes, es decir,
asignar una secuencia de bytes, “valor de código”, a cada carácter o
punto de código, existen varias alternativas.

Las dos codificaciones más obvias almacenan los caracteres Unicode como
una secuencia de bytes de ancho fijo de 2 o 4 bytes. Los términos
oficiales para estas codificaciones son UCS-2 y UCS-4, respectivamente.
A menos que se especifique lo contrario, el byte más significativo es el
primero (Big endian). Un archivo ASCII se puede transformar en un
archivo UCS-2 simplemente insertando un byte “0x00” delante de cada byte
ASCII. Si queremos tener un archivo UCS-4, tenemos que insertar tres
bytes de “0x00” antes de cada byte ASCII.

Para poder usar un ancho variable se creó el formato de transformación
Unicode (UTF) o "formato de transformación UCS” que mediante un mapeo
algorítmico asigna a cada punto de código Unicode una secuencia de bytes
única. Debido a que el punto de código tiene 21 bits, y a que los
ordenadores transfieren datos en múltiplos de 8 bits hay tres posibles
modos de expresar Unicode:

• Usando una unidad de código de 32 bits, cada carácter se representa con 4 bytes (UTF-32).
• Usando una o dos unidades de código de 16 bits, cada carácter se representa con 2 bytes como mínimo o 4 como máximo (UTF-16).
• Usando de una a cuatro unidades de código de 8 bits cada carácter se representa con 1 byte como mínimo pudiendo llegar a 4 bytes como máximo (UTF-8).

UCS-4, UTF-32, UCS-2, UTF-16 en cierta medida son ineficientes. Las
computadoras intercambian muchas cadenas, y una gran mayoría de esas
cadenas solo usan caracteres ASCII que se pueden almacenar con un solo
byte, ocho bits. Es extremadamente ineficiente usar 4 bytes para
almacenar un carácter ASCII. Además estos formatos de codificación al
usar más de un byte, han de hacer frente al problema de la “endianidad”
ya que pueden almacenarse en memoria con el byte más significativo (MSB)
primero (BE) o el último (LE), lo que puede provocar que cuando se
intercambian datos, los bytes que aparecen en el orden "correcto" en el
sistema de envío, pueden aparecer como desordenados en el sistema
receptor. En algunos casos hay que usar una firma que define el orden de
los bytes y el formulario de codificación, (marca de orden de byte BOM),
que consiste en el código de carácter U+FEFF al comienzo de una
secuencia de datos.

• UTF-8

UTF-8 es una codificación de longitud variable en la que cada punto de
código UCS se codifica utilizando 1, 2, 3 o 4 bytes según sea necesario
por lo tanto es más eficiente para caracteres ASCII, por otro lado no
presenta el problema de “endianidad” al tener siempre el mismo orden de
bytes.

UTF-8 tiene las siguientes propiedades:

• Los caracteres UCS U+0000 a U+007F (ASCII) están codificados simplemente como 1 byte 0x00 a 0x7F (compatibilidad ASCII).
• Todos los caracteres de UCS > U+007F (127 decimal) están codificados como una secuencia de varios bytes, cada uno de los cuales tiene el bit más significativo establecido. Por lo tanto, ningún byte ASCII (0x00-0x7F) puede aparecer como parte de ningún otro carácter.

A continuación se muestra las reglas del algoritmo para la codificación
utf-8, partiendo de su punto de código se emplearán 1, 2, 3 o 4 bytes.
Las posiciones de los bits “xxx…” se llenan con los bits del número del
código de carácter en representación binaria, teniendo en cuenta que el
extremo derecho de los bits x será el bit menos significativo.

U+0000 - U+007F (0-127): 0xxxxxxx (1byte)
U+0080 - U+07FF (128-2047): 110xxxxx 10xxxxxx (2bytes)
U+0800 - U+FFFF (2048-65535): 1110xxxx 10xxxxxx 10xxxxxx (3bytes)
U+10000 - U+1FFFFF (65536-2097151): 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx (4bytes)

Si el primer bit de un byte es un "0", los 7 bits restantes del byte
contienen uno de los 128 caracteres originales ASCII de 7 bits.

El primer byte de una secuencia multibyte que representa un carácter no
ASCII siempre está en el rango de 0xC0 (192) a 0xFD (253) e indica de
cuántos bytes está compuesta la secuencia en función de los bits con
valor “1”.

Todos los bytes adicionales en una secuencia multibyte están en el rango de 0x80 (128) a 0xBF (191).

Por ejemplo el carácter “ñ” tendría el código número 241 (decimal) que es F1 en hexadecimal y en binario 11110001, su código Unicode por lo tanto sería U00F1, para su codificación se usaran 2 bytes, “110xxxxx 10xxxxxx”, sustituyendo las x por el valor de su código, 241, en binario el resultado sería 110000*11* 10*110001* equivalente a c3b1 en hexadecimal, y a [195, 177] en decimal.

Como hemos mencionado antes, también podríamos representar la letra “ñ” como una secuencia compuesta del carácter base U+006E "n" seguido del carácter no espaciador U+0303“~” que pertenece al bloque marcas diacríticas que van desde la U+0300 a U+036F. Para representarlo necesitaríamos 3 bytes:

• 1 byte para la letra “n” que se corresponde con el condigo número 110 en decimal que es 6E hexadecimal y en binario 01101110
• 2 bytes para la marca diacrítica “~” que se corresponde con el código número 771 en decimal que se corresponde con 0x303 en hexadecimal y en binario 1100000011 si lo pasamos a la codificación UTF8 110xxxxx 10xxxxxx tendríamos 2 bytes con los valores 1100*1100* 10*000011* que equivalen a cc83 en hexadecimal y a [204, 131] en decimal.

A continuación, usaremos JavaScript para ejemplificar lo explicado y relacionarlo con los ArrayBuffer, usaremos el objeto incorporado TextDecoder que nos permite leer el texto de un conjunto de datos binarios y convertirlo en un dato de tipo string de JavaScript, dados un búfer y la codificación, si no se especifica la codificación por defecto será utf-8. También usaremos el método TextEncoder que toma un String como una entrada y devuelve una secuencia de bytes con codificación UTF-8 siempre devuelve un tipo Uint8Array. A modo de curiosidad también usaremos el método codePointAt(pos)de String, que nos permite obtener el punto de código del valor Unicode del carácter que está situado en una posición (pos) determina de la cadena. También conviene señalar que en JavaScript, los literales de cadena se pueden expresar mediante su respectivo punto de código Unicode en codificación UTF-16 para ello se ha de utilizar la secuencia de escape Unicode, la sintaxis general es\uXXXX, donde X denota cuatro dígitos hexadecimales.

Codigo disponible en el archivo EncodingArrayBuffer.js GitHub

const encoder = new TextEncoder()
const decoder = new TextDecoder()

console.log('ñ'.codePointAt(0));//241
//dec=241 hex=F1 bin=11110001 => utf-8 (11000011 10110001 -> c3b1 -> 2bytes [195, 177]
const str1u8 = new Uint8Array([195,177]);//Generamos un búfer con los datos oportunos.
console.log(str1u8)//[195,177]
let str1 = decoder.decode(str1u8)//decodificamos el bufer
console.log(str1)//ñ
console.log(str1.length);//1
console.log(str1.codePointAt());//241

let string1 = '\u00F1';
console.log(string1);//ñ
console.log(string1===str1);//true

const vista = encoder.encode(str1)
console.log(vista);//[195,177]

const ene='n'
const diacritica='̃'
console.log(ene.codePointAt(0));//110
//dec=110 hex=6E bin=01101110 => utf-8 -> 01101110 -> 6E -> 1 byte [110]
console.log(diacritica.codePointAt(0));//771
//dec=771 hex=0x303 bin=1100000011 => utf-8 (11001100 10000011-> cc83 -> 2 bytes [204, 131].
const u8 = new Uint8Array([110,204,131]);//Generamos un búfer con los datos oportunos.
console.log(u8)//[110,204,131]
let str2 = decoder.decode(u8)//decodificamos el bufer
console.log(str2)//ñ
console.log(str2.length);//2 hemos usado dos caracteres
//Hallamos el punto de código de cada caracter.
console.log(str2.codePointAt(0));//110
console.log(str2.codePointAt(1));//771

let string2 = '\u006E\u0303';
console.log(string2);//ñ
console.log(string2===str2);//true

const vista2 = encoder.encode(str2)
console.log(vista2);//[110,204,131]

Notas adicionales

Como hemos comprobado antes para el caso
del carácter “ñ” un punto de código, o una secuencia de puntos de código,
pueden representar el mismo carácter abstracto, esta información hay que
tenerle en cuenta a la hora de comparar cadenas y de operar con ellas, debido a
que los puntos de código son diferentes por lo que la comparación de cadenas no
los tratará como iguales, aunque visualmente lo parezcan, debido a que la
cantidad de puntos de código en cada versión es diferente por lo que las
cadenas tienen diferentes longitudes. Lo podemos comprobar en el siguiente
código.

//comparamos las dos cadenas string1='\u00F1' y string2='\u006E\u0303'
console.log(string1 === string2); //false
console.log(string1.length);      // 1
console.log(string2.length);      // 2

Para resolver el anterior problema se puede usar el método normalize() de string, que permite convertir una cadena en una forma normalizada común para todas las secuencias de puntos de código que representan los mismos caracteres.

Se puede usar la normalización basada en la equivalencia canónica: dos secuencias de puntos de código tienen equivalencia canónica si representan los mismos caracteres abstractos y siempre
deben tener la misma apariencia visual y comportamiento. Para ello, podemos usar string.normalize([forma]) donde el argumento “forma” puede ser entre otros:

• “NFC”: Normalization Form Canonical Composition. Forma canónica compuesta
• “NFD”: Normalization Form Canonical Decomposition. Forma canónica descompuesta

Para producir una forma de la cadena que será la misma para todas las cadenas canónicamente equivalentes. Apliquemos las normalizaciones a las dos representaciones del carácter “ñ”

//Convertimos string1 '\u00F1' a su forma descompuesta
string1 = string1.normalize('NFD');//ñ
console.log(string1 === string2); // true
console.log(string1.length);      // 2
console.log(string2.length);      // 2
console.log(string1.codePointAt(0).toString(16)); //6E
console.log(string1.codePointAt(1).toString(16)); //303

//Convertimos string2 y string1 \u006E\u0303 a sus formas compuesta
string1 = string1.normalize('NFC');//ñ
string2 = string2.normalize('NFC');//ñ
console.log(string1 === string2);// true
console.log(string1.length);// 1
console.log(string2.length);//1
console.log(string2.codePointAt(0).toString(16)); //f1
console.log(string1.codePointAt(0).toString(16)); //f1

Por ejemplo si quisiéramos obtener una cadena libre de marcas diacríticas, tildes, diéresis podríamos normalizarla a su forma descompuesta y a continuación eliminar las marcas diacríticas.

let cadenaDiacriticos ='áéíóúñüÁÉÍÓÚnaeiou'
console.log(cadenaDiacriticos.length)//18
//normalizamos forma descopmuesta y quitamos marcas diacríticas que van desde la `U+0300` a `U+036F`
cadenaDiacriticos=cadenaDiacriticos.normalize('NFD')
console.log(cadenaDiacriticos.length)//30
cadenaDiacriticos=cadenaDiacriticos.replace(/[\u0300-\u036f]/g,"");//aeiounuAEIOUnaeiou
console.log(cadenaDiacriticos)////aeiounuAEIOUnaeiou
console.log(cadenaDiacriticos.length)//18