MENU

JavaScript配列・連想配列ArrayBuffer文字列操作

【JavaScript】 数値配列を16進数でjoinする

更新日:2021/07/06

 

JavaScriptでは、数値配列に対してjoinメソッドを実行すると、10進数の文字列に変換されます。

 

では16進数の文字列に変換したいときはどうすればいいのでしょうか?

 

直接16進数で連結可能か?

 

Array.prototype.joinメソッドの呼び出しだけで、直接16進数で連結できないか調べてみました。

 

Array.prototype.joinメソッドのアルゴリズムでは、数値を文字列変換するとき10進数に変換するように定義されていました。

 

 

そのため、Array.prototype.joinメソッドの呼び出しだけで、直接16進数に変換することはできないようです。

16進数文字列の配列を作成

 

対処法として、数値配列をmapメソッドで16進数文字列の配列に変換したあと、joinで連結します。

 


const array = [0x0123,0x4567,0x89AB];
console.log( array.map( e=>e.toString(16) ).join(",") );
    // 123,4567,89ab

 

大文字で表示したいときは、次のようにtoUpperCaseを使用します。

 

e.toString(16).toUpperCase()

 

0で桁数を統一したいときは、次のようにpadStartを使用します。

 

e.toString(16).padStart(4,"0")

 

padStartについては、こちらをご覧ください。
【JavaScript】 ゼロやスペースで埋めして桁揃えする

 

8進数や32進数などもできます。

 


const array = [0x0123,0x4567,0x89AB];
console.log( array.map( e=>e.toString(8).toUpperCase() ).join(",") );
    // 443,42547,104653
console.log( array.map( e=>e.toString(32).toUpperCase() ).join(",") );
    // 93,hb7,12db

TypedArrayを16進数でjoinする

 

TypedArrayを16進数文字列でjoinする場合は、Arrayオブジェクトと同じ方法を使用できません。

 

TypedArrayについては、こちらをご覧ください。
【JavaScript】 ArrayBufferとTypedArray-メモリを確保してアクセス

 

TypedArrayのmapメソッドは、TypedArrayを返します。
TypedArrayには文字列を格納できないので、今回の目的には使用できないのです。

 

そこで最初に紹介するのが、reduceを使用した方法です。

 

reduceについては、こちらご覧ください。
【JavaScript】 forEach/map/filter/reduceを根本的に理解する

 

reduceを使用

 


const u16 =   Uint16Array.of( 100 , 200 , 300 , 400  );
console.log( 
        u16.reduce( 
            (a,b,index)=>a + (index !== 0 ? "," : "") + b.toString(16)
             ,""
         )
    );
  // 64,c8,12c,190

 

しかし、joinを使用していないので、今回のタイトルにはそぐわないですね。

 

次は、forEachで文字列配列を作成してみます。

 

forEachを使用

 


const u16 =   Uint16Array.of( 100 , 200 , 300 , 400  );
console.log( 
     ((u)=>{
        const result =[];
        u.forEach( e=>result.push( e.toString(16)) );
        return result;
     })(u16).join( "," )
);
  // 64,c8,12c,190

 

即時関数を使用することで、無理やりメソッドチェーンしています。

 

無理やりついでに、ArrayオブジェクトのmapメソッドにTypedArrayを渡してみます。

 

Arrayオブジェクトのmapメソッドを使用

 


const u16 =   Uint16Array.of( 100 , 200 , 300 , 400  );
console.log( 
    Array.prototype.map.call( u16 ,e=>e.toString(16) ).join( "," ) 
);
  // 64,c8,12c,190

 

callは、メソッドのthis値を別の値に置き換えることができるメソッドです。

 

callについては、こちらをご覧ください。
【JavaScript】 そろそろcall()とapply()を理解してみようと思う

 

Arrayオブジェクトのmapメソッドは、this値がTypedArrayでもArrayオブジェクトを生成して返してくれます。
そのため、上のコードは有効です。

けーちゃんおススメJavaScript入門書

  • スラスラ読める JavaScript ふりがなプログラミング
  • プログラム未経験者がJavaScript始めるならコレ!
    コードを掲載して自分で理解しろという投げっぱなしな入門書とは異なり、コードに一つ一つどんなことをやっているかをふりがなという形式で解説しています。
    それでいてJavaScriptの基礎と応用を学べる良書です。
  • これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん
  • JavaScriptの機能を実践で活かすにはHTMLやCSSの知識が不可欠です。
    しかしそれらの知識があることが前提として書かれている書籍が多い中、この本は総合的な知識を身に着けることができます。
    HTMLやCSSの知識も不安な方には、ぴったりの一冊です
  •  

    入門書の役割は、自分のやりたいことをネットで調べることができるようになるための、基礎的な知識の獲得です。
    まずはこれらの本でしっかりと基礎知識を身につけましょう。
    そしてもっと高度なことや専門的なことはネットで調べ、情報が足りないと感じたら書籍を購入してください。


    期間限定情報:
    7/16から7/18は63時間のビッグセール!
    欲しかったアレが安く手に入るチャンスです
    忘れずにチェックしてください!
    僕は以前のタイムセール祭りで4Kモニタが買ったけど、それより安かったらどうしよう・・・

    さらにお得なポイントアップキャンペーンも同時開催!

    記事の内容について

     

    こんにちはけーちゃんです。
    説明するのって難しいですね。


    「なんか言ってることおかしくない?」
    たぶん、こんなご意見あると思います。

    裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

    そんなときは、ご意見もらえたら嬉しいです。

    ご意見はこちら。
    https://note.affi-sapo-sv.com/info.php

    【お願い】

    お願い

    ■このページのURL


    ■このページのタイトル


    ■リンクタグ


    ※リンクして頂いた方でご希望者には貴サイトの紹介記事を作成してリンクを設置します。
    サイト上部の問い合わせよりご連絡ください。
    ただしサイトのジャンルによっては、お断りさせていただくことがあります。