データ変換文字列操作

【JavaScript】 数値と文字列の相互変換の方法

更新日：2021/09/20

JavaScriptでプログラムをしていると、数値をブラウザに表示するために文字列にしたり、計算するために文字列を数値に変換するなどといった場面に遭遇します。

こういった相互に変換するためのメソッドがJavaScriptには用意されています。

 

数値から文字列への変換

数値を文字列に変換する方法は、その目的によっていくつか用意されています。

とりあえずは、次の toString を覚えておきましょう。

toString()：多くの場面で使用可能

toStringは、Numberオブジェクトのメソッドです。
引数に8や16などの基数と指定することで、8進数や16進数の文字列にも変換できます。

多くの場面で使用できるメソッドです。

toStringの構文

const 変換結果 = 数値.toString( 基数 );

■引数

基数：

変換後の基数を2から36で指定します。
省略可能で、規定値は10です。

■戻り値

変換後の文字列です。

■使用例


const number = 100;

console.log( number.toString() );  // "100"
console.log( number.toString(16) ); // "64"
console.log( number.toString(32) ); // "34"

const number2 = 100.987;

console.log( number2.toString() );  // "100.987"
console.log( number2.toString(16) );  // "64.fcac083126e8"
console.log( number2.toString(32) );  // "34.vim0gc96t"

■数値リテラルから直接メソッドを呼び出す

次のように整数の数値リテラルから直接メソッドを呼び出すとエラーになります。


100.toString()
// SyntaxError: identifier starts immediately after numeric literal

数値を( )で囲うか、小数表記をしてください。


console.log( (100).toString() );  // "100"
console.log( 100.0.toString() );  // "100"

toFixed()：小数の桁を指定して文字列化

変換後の文字列で、小数表記の桁数を合わせたいときはtoFixedメソッドを使用します。
toFixedは、Numberオブジェクトのメソッドです。

引数に小数の桁数を指定します。
指定した桁より後の数値は四捨五入されます。

■任意の桁数で切り捨てたいときは、こちら

また、桁数が足りないときは "0" で穴埋めされます。

■正確には四捨五入ではありません。
ここでは詳しく解説しませんが、興味がある方はtoFixedのアルゴリズムを解読してみてください。
toFixedのアルゴリズム：Number.prototype.toFixed

toFixedの構文

const 変換結果 = 数値.toFixed( 小数の桁 );

■引数

小数の桁：

変換後の小数の桁を0から100の範囲で指定します。
省略可能で、規定値は0です。

■戻り値

変換後の文字列です。

■使用例


console.log( (100).toFixed() );  // "100"
console.log( (100).toFixed( 3 ) );  // "100.000 "
console.log( 100.12345.toFixed( 3 ) ); // "100.123"
console.log( 100.12345.toFixed( 4 ) ); // "100.1235"
console.log( 100.12345.toFixed( 10 ) ); // "100.1234500000"

その他の変換

String( )

String関数は、関数内部で引数に対応するtoStringメソッドを呼び出して、その結果を返します。

引数として数値を指定した場合、最初に紹介しているtoStringと同じ結果となります。
ただし基数を指定できないため、取得できるのは10進数のみです。


console.log( String(100) );     // "100"
console.log( String(100.12345) ); // "100.12345"

  // Stringは数値以外も受け付ける
console.log( String( { } ) ); // "[object Object]"
console.log( String( true ) ); // "true"

String( )はnew演算子を用いることで、コンストラクターとして扱うことができます。
このことを理解したうえで使用するならいいのですが、初心者のうちは混乱のもとかもしれません。

toStringを使用することをおすすめします。

演算による暗黙的変換

数値と文字列を + 演算子で結合すると、数値が文字列に変換されます。
この性質を利用することで、関数やメソッドを呼び出すことなく、スッキリとしたコードが記述できます。


const number = 1234;
consolr.log( "" + number ); // "1234"

とはいえコードの目的が不明瞭となります。

このようなテクニック系のノウハウは、しばらく使ってないと忘れてしまいます。
未来の自分が記述ミスと判断する可能性があるので、あまりおすすめできません。

任意の桁数で切り捨てたいときの手法

ここで紹介しているtoFixed関数は、指定桁数で四捨五入します。
では、切り捨てたいときどうしたらいいでしょうか。

JavaScriptには、切り捨ててくれる関数がないので自作します。

toFixedを使用して切り捨てる

考え方は、toFixed関数で一桁多い結果を得て、最後の一文字をカットするだけです。
ただし桁数が0の場合、小数点もカットします。

任意の桁数で切り捨て


const toFixedFloor = ( number , base ) =>{
    const fixedString = number.toFixed( base + 1 );
    const cutPos = fixedString.length -  ( base === 0 ? 2 : 1);
    return fixedString.substring( 0 , cutPos );
}

メソッドチェーンのみで記述してみます。

toFixedの結果文字列にメソッドチェーンを行った場合、その文字列の長さを取得するのが困難です。
そのため考え方を大幅に修正して、replaceで小数点以下を置換しています。

任意の桁数で切り捨て（メソッドチェーン）


const toFixedFloor = ( number , base ) =>number.toFixed( base + 1 )
    .replace( /\.\d+$/,
        match=>match.substring( 0 ,base === 0 ? 0 :  base + 1)
    );

この関数の実行結果は、次のようになります。

実行結果


console.log( toFixedFloor( 123.5 , 0 ) );  // "123"
console.log( toFixedFloor( 123.5678 , 1 ) ); // "123.5"

JavaScriptには数値データの小数点を切り捨てて、整数に変換するMath.floor()というメソッドがあります。
このメソッドに負の値を指定すると、見た目上切り上げられます。


Math.floor( 3 ); // 3
Math.floor( -3 ); // -3
Math.floor( -3.1 ); // -4

今回紹介したコードは、単純に切り捨てています。


toFixedFloor2( -3.1 , 0 ) // " -3"

Math.floor()と同じ結果を得たいなら、数値をMath.floor()で変換したあと、文字列化します。
Math.floor()は整数変換ですが、下のコードは小数にも対応しています。


const toMathFloor = ( number , base ) =>{
    const digit = base === 0 ? 1 : 10 ** base;
    const num = Math.floor(  number * digit ) / digit;
    returnnum.toFixed( base );
};

カンマで区切る方法

JavaScriptのNumberオブジェクトには、現在のロケール（言語や地域など）に従って数値をフォーマットするtoLocaleStringというメソッドがあります。

これを使用することで、カンマで3桁ごとに区切ることができます。


const val = 12345.6789;
console.log( val.toLocaleString() );  // "12,345.679"

他のロケールでも確実にカンマ区切りしたいときや、多言語の区切り方式を採用したいときは、引数でロケールを指定します。


console.log( val.toLocaleString( "ja-JP") );  // "12,345.679"
console.log( val.toLocaleString( "de-DE") ); // "12.345,679" ← ドイツ語形式
console.log( val.toLocaleString( "fr-fr") ); // "12 345,679" ← ドイツ語形式

これまでの結果を見ると、あることに気が付くと思います。
小数点第4位で四捨五入されています。

もっと先まで表示したいときは、Intlオブジェクトを使用します。
このオブジェクトのNumberFormatメソッドで、数値のフォーマット情報を生成します。
このとき小数の最大桁数を決定するmaximumFractionDigitsに0から20の範囲で値をセットします。

その後、formatメソッドで数値を整形します。


console.log(new Intl.NumberFormat("ja-JP", { maximumFractionDigits:10 }).format(val) );
    // "12,345.6789"

 

文字列から数値への変換

JavaScriptは文字列を数値に変換する関数が３つ用意されています。

単純に数値を文字列に変換するだけなら、parseInt と parseFloat を覚えておきましょう。

parseInt() と parseFloat()

parseInt関数は文字列の整数部を読み取り、数値データに変換します。
parseFloat関数は小数部分を含めて読み取り、数値データに変換します。

なおNumberオブジェクトにも同名のメソッドが存在します。
どちらも同じものです。

parseInt と parseFloat の構文

const 変換結果 = parseInt( 文字列 , 基数 );
const 変換結果 = parseFloat( 文字列 );

const 変換結果 = Number.parseInt( 文字列 , 基数 );
const 変換結果 = Number.parseFloat( 文字列 );

※Numberは数値データではなくて、Numberという名前のオブジェクトです。この通りに入力してください。

■引数

文字列：

数値に変換する文字列です。
文字列内の先頭から数値として認識できる文字を読み込みます。
数値として認識できない文字は切り捨てられます。
ただし、先頭の空白文字は無視されます。

"12345xxxxx" → "12345"
" 12345xxxxx" → "12345"
"xxxxx12345" → ""

parseIntは数値の前に "0x"または"0X"があると、16進数と判断します。
これは16進数のみです。"0o"(8進数)、"0b"(2進数)には対応していません。

parseFloatは、16進数にも対応していません。
"0x"のxが数値でないとみなされ、0のみ読み込まれます。

文字列中に数値以外の文字が含まれいるかどうかは、parseIntおよびparseFloatの結果から判断できません。
エラーとしたいときは、事前に文字列が数値かどうかチェックが必要です。
詳しくは次のページを読んでみてください。
■【JavaScript】 数値チェック方法をケース別に解説します

基数：

文字列の基数を2から36で指定します。
省略可能で、規定値は10です。

この引数はparseFloatでは指定できません。

■戻り値

変換後の数値です。
入力した値が数値でない、または数値として認識できない文字列の場合 NaN となります。

■使用例

parseIntの使用例


console.log( parseInt( "100" ) ); // 100
console.log( parseInt( "100.789" ) ); // 100
console.log( parseInt( "-100.789" ) ); // -100
console.log( parseInt( "100nnnn" ) ); // 100
console.log( parseInt( "abc" , 16 ) ); // 2748
console.log( parseInt( "xyz" , 36 ) ); // 44027

console.log( parseInt( "0xff" ) ); // 255
console.log( parseInt( "0o10" ) ); // 0

console.log( parseInt( "abcde" ) ); // NaN
console.log( parseInt( null ) ); // NaN
console.log( parseInt( NaN ) ); // NaN
console.log( parseInt( undefined ) ); // NaN

parseFloatの使用例


console.log( parseFloat( "100" ) ); // 100
console.log( parseFloat( "100.789" ) ); // 100.789
console.log( parseFloat( "-100.789" ) ); // -100.789
console.log( parseFloat( "100.5nnnn" ) ); // 100.5
console.log( parseFloat( "abc" ) );  // NaN
console.log( parseFloat( "xyz" ) );  / NaN

console.log( parseFloat( "0xff" ) ); // 0
console.log( parseFloat( "0o10" ) ); // 0

console.log( parseFloat( "abcde" ) ); // NaN
console.log( parseFloat( null ) ); // NaN
console.log( parseFloat( NaN ) ); // NaN
console.log( parseFloat( undefined ) ); // NaN

parseIntは小数部分を単純に切り捨てます。
Math.floorと同じ結果を得たい場合は、parseFloatの結果でMath.floorを実行してください。


console.log( Math.floor( parseFloat( "-100.789" ) ) ); // -101

Number( )

Number( )は数値として判断できる値を数値に変換します。

数値として判断できる値は、trueやnullなども含まれます。詳しくは次の記事の最初の項目（JavaScriptの数値データ）を読んでみてください。
■【JavaScript】 数値チェック方法をケース別に解説します

parseIntとparseFloatは、文字列中に数値以外が含まれていても変換されます。
しかしNumberは、変換されずにNaNが返ります。

parseIntは"0x"のみでしたが、Numberは"0o"や"0b"なども判別します。

Numberの使用例


console.log( Number( "100" ) );  // 100
console.log( Number( "100.789" ) );  // 100.789
console.log( Number( "-100.789" ) ); // -100.789
console.log( Number( "100.5nnnn" ) ); // NaN
console.log( Number( "abc" ) );  // NaN
console.log( Number( "xyz" ) ); // NaN

console.log( Number( "0xff" ) ); // 255
console.log( Number( "0o10" ) ); // 8

console.log( Number( "abcde" ) ); // NaN
console.log( Number( null ) ); // 0
console.log( Number( NaN ) ); // NaN
console.log( Number( undefined ) ); // NaN

 

値が数値文字列または数値型かどうかのチェック

この記事では、変換前の値が数値文字列または数値型であることが前提となっています。

しかし事前に型チェックをおこなうべき場面も多いです。

次の関数は、引数が数値型で値が有限以外のとき false を返します。
それ以外のときは、数値を文字列に変換しています。

数値型チェックと文字列に変換する関数


const convertNumberToString =
    number => Number.isFinite( number )
    ? number.toString() : false;

次の関数は、数値文字列以外のときは false を返します。
それ以外のときは、文字列を数値に変換しています。

数値文字列チェックと数値に変換する関数


const convertStringToNumber = n => {
    if( typeof n !== "string" || n === "" ) return false;
    const num =  Number( n ); 
    return isNaN( num ) ? false : num;
}

数値関連のチェックについては、次の記事で紹介しているので詳しくは次のリンク先を読んでみてください。

■【JavaScript】 数値チェック方法をケース別に解説します

更新日：2021/09/20

書いた人（管理人）：けーちゃん

関連記事

スポンサーリンク

記事の内容について

null

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

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

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

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

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

 

このサイトは、リンクフリーです。大歓迎です。