JavaScript 文字列をバイナリに変換 その逆をやるには

Question

前提・実現したいこと

文字列をバイナリコードに変換するものをつくってます
変換はできたのですが逆に戻すにはどうしたらいいでしょうか？

該当のソースコード

<input type="text" id="ti1" value ="文字をバイナリに変換">
<button onclick="convert();">変換</button>
<button onclick="dconvert()">戻す</button>

<script>

function convert(){
input=ti1.value;
ti1.value="";
for(i=0;i<input.length;i++){
ti1.value +=input[i].charCodeAt(0).toString(2);
}
}

function dconvert(){
input=ti1.value;
ti1.value="";
for(i=0;i<input.length;i++){
ti1.value +=input[i].charCodeAt(0).toString(0);//逆がわからない
}
}
</script>

Comments

[hoshi-takanori]

単純に toString(2) すると桁数が 8 の倍数にならないので、戻すときはどこで区切って良いか分からないですね。また、日本語とかも考慮するならエンコーディングも考えないと…。

Answer 1

うっかりするとutf-8のデコードロジックを自分で実装するハメになりそうです。
サロゲートペア対応など考えると気が滅入ります。
考え方を変えてブラウザネイティブのutf-8エンコーダ/デコーダを呼び出して利用するとよいと思います。
そのようなAPIがあります。MDNの該当ページはこちら→（TextEncoder/TextDecoder）

function convert() {
  ti1.value = [...new TextEncoder().encode(ti1.value)].map(c => c.toString(2).padStart(8, '0')).join('');
}
function dconvert() {
  ti1.value = new TextDecoder().decode(Uint8Array.from(ti1.value.match(/.{8}/g).map(b => parseInt(b, 2))));
}

Answer 2

charCodeAtが根拠になっているので、逆は String.fromCodePoint()ですね。
修正依頼に来ている問題があるので、単にfromCodePointを使っても解決はしませんが…。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint

console.log('a'.charCodeAt(0)); // 97 を出力する
console.log(String.fromCodePoint(97)); // 'a' を出力する

string型で持ちまわるのではなく、number型配列で持ちまわる必要がありそうです。
頑張ってください。