0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【JavaScript】string,hex,ArrayBufferの相互変換

Posted at

はじめに

string,hex,ArrayBufferを相互に変換したくなりました。
(hexは本記事では16進数の文字列という意味で用いています。)
ググってみると、Node用のBufferクラスを使ったサンプルが多かったので、関数を作成してみました。

注意

今回作成した変換する文字列の長さは1です。1より大きい文字列に対応する場合は自身で対応願います。
サンプルプログラムを見てもらえばわかりますが、
1byteの文字を変換する場合、str2buf、buf2hexでhexに変換すると '0033' になり、
str2hex で hexに変換すると '33' になります。
'0033'でも'33'でも元の文字に戻るのでこのままとしています。問題あれば修正して使ってください。
(個人的にはhexを得るときはstr2hexを呼ぶ)

サンプルプログラム

4パターン書きました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>convert</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const strJap = '';
    const str = '3';

    // '山' -> str2buf -> ArrayBuffer -> buf2hex -> '5c71' -> hex2buf -> Arraybuffer -> buf2str -> '山'
    const buf00 = str2buf(strJap);
    const hex0 = buf2hex(buf00);
    const buf01 = hex2buf(hex0);
    const str0 = buf2str(buf01);
    console.log(hex0);
    console.log(str0);

    // '山' -> str2hex ->  '5c71' -> hex2str -> '山'
    const hex1 = str2hex(strJap);
    const str1 = hex2str(hex1);
    console.log(hex1);
    console.log(str1);

    // '3' -> str2buf -> ArrayBuffer -> buf2hex -> '0033' -> hex2buf -> Arraybuffer -> buf2str -> '3'
    const buf20 = str2buf(str);
    const hex2 = buf2hex(buf20);
    const buf21 = hex2buf(hex2);
    const str2 = buf2str(buf21);
    console.log(hex2);
    console.log(str2);

    // '3' -> str2hex ->  '33' -> hex2str -> '3'
    const hex3 = str2hex(str);
    const str3 = hex2str(hex3);
    console.log(hex3);
    console.log(str3);
});

/**
 * string to hex
 * @param {string} str string
 * @returns {string} hex
 */
function str2hex(str) {
    return str.charCodeAt(0).toString(16);
}

/**
 * hex to string
 * @param {string} hex hex
 * @returns {string} string
 */
function hex2str(hex) {
    return buf2str(hex2buf(hex));
}

/**
 * hex to buffer
 * @param {string} hex hex
 * @returns {ArrayBuffer} array buffer
 */
function hex2buf(hex) {
    hex = hex.padStart(4, '0'); // length to 4
    const array = [0, 1].map(i => parseInt(hex.substring(i * 2, (i + 1) * 2), 16));
    return new Uint8Array(array.reverse()).buffer;
}

/**
 * buffer to hex
 * @param {ArrayBuffer} buf array buffer
 * @returns {string} hex
 */
function buf2hex(buf) {
    const array = [...new Uint8Array(buf)].map(x => x.toString(16).padStart(2, '0'));
    return array.reverse().join('');
}

/**
 * string to buffer
 * @param {string} src string
 * @returns {ArrayBuffer} array buffer
 */
function str2buf(str) {
    return (new Uint16Array([].map.call(str, c => c.charCodeAt(0)))).buffer;
}

/**
 * buffer to string
 * @param {ArrayBuffer} buf array buffer
 * @returns {string} string
 */
function buf2str(buf) {
    return String.fromCharCode.apply('', new Uint16Array(buf))
}
</script>
</head>
<body>
</body>
</html>	

参考リンク

https://stackoverflow.com/questions/40031688/javascript-arraybuffer-to-hex
String と ArrayBuffer の相互変換 JavaScript

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?