DDG - Develop a Digital Garden

develop a digital garden

トップ > Elm > Elmで数値をフォーマットする方法

Elmで数値をフォーマットする方法

Elm Programming

Image from Gyazo

Elmで数値をフォーマットする際は elm-format-number というパッケージが便利です。

$ elm install cuducos/elm-format-number

パッケージには、

  • usLocale ( 12,345.67 )
  • spanishLocale ( 12.345,67 )
  • frenchLocale ( 12 345,67 )

というフォーマットがあらかじめ用意されているので、適宜選択してください。
※基本的に usLocale になると思います

module Main exposing (main)

import FormatNumber exposing (format)
import FormatNumber.Locales exposing (usLocale)
import Html exposing (text)


main =
    text (format usLocale 12345.67)

フォーマットをカスタマイズする方法

基本的に usLocale を利用すれば問題ないのですが、

小数点以下を表示したくない

という場合には、フォーマットをカスタマイズする必要があります。

import FormatNumber exposing (format)
import FormatNumber.Locales exposing (Decimals(..), Locale, usLocale)

main =
        text ( format customeLocale 12345.67 ) -> 12345

-- Locale型を返す関数を定義する
customeLocale : Locale
customeLocale =
        -- usLocaleをひな形とし、小数点以下の桁数を0にする
        { usLocale| decimals = Exact 0 }

また、cuducos/elm-format-numberパッケージは、小数点以下の切り捨てなどをサポートしていないためフォーマット前に、

あたりを使用する必要があります。

サンプルコードに実装例もあるので、ぜひ参考にしてください。

サンプルコード

module NumberFormat exposing (main)

import FormatNumber exposing (format)
import FormatNumber.Locales exposing (Decimals(..), Locale, frenchLocale, spanishLocale, usLocale)
import Html exposing (Html, li, text, ul)
import Round


main : Html.Html msg
main =
    ul []
        [ li [] [ text ("us: " ++ format usLocale 12345.67) ]
        , li [] [ text ("spanish: " ++ format spanishLocale 12345.67) ]
        , li [] [ text ("french: " ++ format frenchLocale 12345.67) ]
        , li [] [ text ("custom: " ++ format integerLocale 12345.67) ]
        , li [] [ text ("custom floor: " ++ (format integerLocale <| toFloat <| floor 12345.67)) ]
        , li [] [ text ("custom floor float: " ++ (format floatLocale <| Round.floorNumCom 1 12345.67)) ]
        ]


integerLocale : Locale
integerLocale =
    { usLocale | decimals = Exact 0 }

floatLocale : Locale
floatLocale =
    { usLocale | decimals = Min 0 }

参考