NPM (Node Package Manager) es un administrador de paquetes de paquetes Node.js. Hay un paquete NPM llamado ‘shortid’ que se usa para acortar ID únicos no secuenciales compatibles con URL.
Comando para instalar:
npm install string-to-arraybuffer
Sintaxis para importar el paquete en un archivo local
const str2ab = require('string-to-arraybuffer')
Sintaxis para convertir una string en un búfer de array
const arrBuff = str2Ab(string)
Parámetros: toma un parámetro ‘string’ que queremos convertir en el búfer de array.
Ejemplo 1: Este ejemplo ilustra cómo usar ‘string-to-arraybuffer para convertir de string a búfer de array.
Nombre de archivo: index.js: este archivo contiene lógica para convertir una string en un búfer de array.
Javascript
const express = require('express')
const bodyParser = require('body-parser')
const str2Ab =require('string-to-arraybuffer')
const formTemplet = require('./form')
const app = express()
const port = process.env.PORT || 3000
// The body-parser middleware to parse form data
app.use(bodyParser.urlencoded({extended : true}))
// Get route to display HTML form
app.get('/', (req, res) => {
res.send(formTemplet({}))
})
// Post route to handle form submission logic and
app.post('/', (req, res) => {
const {str} = req.body
// Converting from utf8 string to array buffer
const arrBuffer = str2Ab(str)
// Create view of array buffer
const view = new Int8Array(arrBuffer)
// Printing on console
console.log(`Original string : ${str}\n`)
console.log('ArrayBuffer :' + view)
})
// Server setup
app.listen(port, () => {
console.log(`Server start on port ${port}`)
})
Nombre de archivo-form.js: este archivo contiene lógica para representar el formulario.
Javascript
module.exports = ({errors}) => {
return `
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css'>
<style>
div.columns {
margin-top: 100px;
}
.button {
margin-top: 10px
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-centered'>
<div class='column is-5'>
<form action='/' method='POST'>
<div>
<div>
<label class='label' id='str'>
String
</label>
</div>
<input class='input' type='text'
name='str' placeholder=
'string(plain text/base64/dataURI)'
for='str'>
</div>
<div>
<button class='button is-info'>
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
`
}
Producción:
Enviando una string utf8 (texto sin formato) para convertirla en un búfer de array
Respuesta impresa en el símbolo del sistema al enviar la string de texto sin formato (utf8)
Enviando una string de entrada base64 para convertirla en un búfer de array
Respuesta impresa en el símbolo del sistema al enviar la string base64
Nota: mire la respuesta en ambos casos, ya que la string enviada es la misma aunque en una forma diferente, su vista de búfer de array también es la misma.
Ejemplo 2: En este ejemplo, usamos tanto ‘string-to-arraybuffer’ como ‘arraybuffer-to-string’ para ilustrar la transparencia entre ellos. aquí usamos una string de texto sin formato para convertirlo de una forma a otra forma.
Nombre de archivo: index.js: este archivo contiene lógica para convertir una string de texto sin formato en un búfer de array y decodificarlo nuevamente en una string de texto sin formato.
Javascript
const express = require('express')
const bodyParser = require('body-parser')
const str2Ab = require('string-to-arraybuffer')
const ab2Str = require('arraybuffer-to-string')
const formTemplet = require('./form')
const app = express()
const port = process.env.PORT || 3000
// The body-parser middleware to parse form data
app.use(bodyParser.urlencoded({extended : true}))
// Get route to display HTML form
app.get('/', (req, res) => {
res.send(formTemplet({}))
})
// Post route to handle form submission logic and
app.post('/', (req, res) => {
const {str} = req.body
// Converting from utf8 string to array buffer
const arrBuffer = str2Ab(str)
// Create view of array buffer
const view = new Int8Array(arrBuffer)
// Decode string from array buffer
const decodedStr = ab2Str(arrBuffer)
// Printing on console
console.log(`Original string : ${str}\n`)
console.log(`Array Buffer : ${view}\n`)
console.log(`Decoded String: ${decodedStr}`)
})
// Server set to run
app.listen(port, () => {
console.log(`Server start on port ${port}`)
})
Nombre de archivo-form.js: este archivo contiene lógica para representar el formulario.
Javascript
module.exports = ({errors}) => {
return `
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css'>
<style>
div.columns {
margin-top: 100px;
}
.button {
margin-top: 10px
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-centered'>
<div class='column is-5'>
<form action='/' method='POST'>
<div>
<div>
<label class='label' id='str'>
Plain text string
</label>
</div>
<input class='input' type='text'
name='str' placeholder=
'plain text string' for='str'>
</div>
<div>
<button class='button is-info'>
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
`
}
Producción:
Enviar string de texto sin formato
Respuesta impresa en el símbolo del sistema al enviar la string de texto sin formato
Ejemplo 3: En este ejemplo, usamos string-to-arraybuffer y arraybuffer-to-string para ilustrar la transparencia entre ellos. usamos string base64 aquí para convertirlo de una forma a otra forma.
Nombre de archivo: index.js: este archivo contiene lógica para convertir una string base64 en un búfer de array y decodificarla nuevamente en una string base64.
Javascript
const express = require('express')
const bodyParser = require('body-parser')
const str2Ab = require('string-to-arraybuffer')
const ab2Str = require('arraybuffer-to-string')
const formTemplet = require('./form')
const app = express()
const port = process.env.PORT || 3000
// The body-parser middleware to parse form data
app.use(bodyParser.urlencoded({extended : true}))
// Get route to display HTML form
app.get('/', (req, res) => {
res.send(formTemplet({}))
})
// Post route to handle form submission logic and
app.post('/', (req, res) => {
const {str} = req.body
// Converting from base64 string to array buffer
const arrBuffer = str2Ab(str)
// Create view of array buffer
const view = new Int8Array(arrBuffer)
// Decode base64 string from array buffer
// using arraybuffer-to-string package
const decodedStr = ab2Str(arrBuffer, 'base64')
// Printing on console
console.log(`Original string : ${str}\n`)
console.log(`Array Buffer : ${view}\n`)
console.log(`Decoded String: ${decodedStr}`)
})
// Server setup
app.listen(port, () => {
console.log(`Server start on port ${port}`)
})
Nombre de archivo-form.js: este archivo contiene lógica para representar el formulario.
Javascript
module.exports = ({errors}) => {
return `
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css'>
<style>
div.columns {
margin-top: 100px;
}
.button {
margin-top: 10px
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-centered'>
<div class='column is-5'>
<form action='/' method='POST'>
<div>
<div>
<label class='label' id='str'>
Base64 string
</label>
</div>
<input class='input' type='text'
name='str' placeholder=
'base64 string' for='str'>
</div>
<div>
<button class='button is-info'>
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
`
}
Producción:
Envío de string base64
Respuesta impresa en el símbolo del sistema al enviar la string base64
Nota: Hemos utilizado algunas clases de Bulma en el archivo form.js para diseñar el contenido.
Publicación traducida automáticamente
Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA