はじめに

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