MENU

JavaScriptデータ変換文字列操作

【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は文字列を数値に変換する関数が3つ用意されています。

 

単純に数値を文字列に変換するだけなら、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】 数値チェック方法をケース別に解説します

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

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

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


    記事の内容について

     

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


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

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

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

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

    【お願い】

    お願い

    ■このページのURL


    ■このページのタイトル


    ■リンクタグ


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