【JavaScript基礎】大きな数や小数をカンマ区切りにする方法（.toLocaleString）

2023年7月26日2023年9月22日

URLをコピーしました！

JavaScript

前回、jQueryのAjaxでJSONデータの取得とPythonからJSON形式で複数のデータを受け取る方法を解説しました。

大きな数の場合：.toLocaleString()

JavaScriptで数値をカンマ区切りにするには「数値.toLocaleString()」を使用します。

JavaScriptで書いてみるとこんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>

    <div id="text"></div>
    
    <script> 
        let val = 1000000000;
        let text = document.getElementById("text");

        text.innerHTML = val.toLocaleString();
    
    </script>
</body>
</html>

ついでにjQueryで書いてみるとこんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<meta charset="UTF-8">
</head>
<body>

    <div id="text"></div>
    
    <script> 
        let val = 1000000000;

        $("#text").text(val.toLocaleString())
    
    </script>
</body>
</html>

これだけでカンマ区切りの数値に変換されます。

少数の場合：

ただ小数の場合、これだけではカンマ区切りになりません。

こちらの例のように小数に対して「.toLocaleString()」を使ってみます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<meta charset="UTF-8">
</head>
<body>

    <div id="text"></div>
    
    <script> 
        let val = 0.0000000001;

        $("#text").text(val.toLocaleString())

    </script>
</body>
</html>

少数に対して「.toLocaleString()」を使うと「０」になってしまいました。

ちなみに「0.001」まではちゃんと小数で「0.001」と表示されます。

それより小さい数字の場合は、小数点以下をどれだけ表示させるかを指示します。

ということで「.toLocaleString(undefined, { maximumFractionDigits: 20 }))」とします。

こうすることで小数点以下20桁までは丸めないようになります。

ちなみに小数点以下20桁までしか指定できませんので、ご注意ください。

これを試してみるとこんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<meta charset="UTF-8">
</head>
<body>

    <div id="text"></div>
    
    <script> 
        let val = 0.0000000001;

        $("#text").text(val.toLocaleString(undefined, { maximumFractionDigits: 20 }))

    </script>
</body>
</html>