String Formatting in Elm

module Main exposing (main)

import Html exposing (text)


main =
    text "hello world"

Our first program will print the classic “hello world” message. Here’s the full source code.

In Elm, we start by defining a module and specifying what it exposes. In this case, we’re exposing the main function, which is the entry point of our program.

We then import the Html module and expose the text function, which we’ll use to display our message.

The main function is where our program starts. In Elm, we define it as a value rather than a function. Here, we’re using the text function to create a simple text node with the content “hello world”.

To run this program, you would typically compile it to JavaScript and then run it in a browser. Here’s how you might do that using the Elm command-line tools:

$ elm make HelloWorld.elm --output=hello.js
$ elm reactor

Then open a web browser and navigate to http://localhost:8000/hello.html.

Sometimes we’ll want to build our programs for production. We can do this using elm make with the --optimize flag:

$ elm make HelloWorld.elm --optimize --output=hello.js

This will produce an optimized JavaScript file that you can include in your HTML.

Now that we can run and build basic Elm programs, let’s learn more about the language.

Elm doesn’t have the concept of formatting strings like Go’s fmt.Printf. Instead, Elm uses a more functional approach to string manipulation and output. For complex string formatting, you would typically use functions like String.concat, String.join, or string interpolation with the ++ operator.

Here’s an example of how you might format different types of data in Elm:

module Main exposing (main)

import Html exposing (div, text)
import Html.Attributes exposing (style)


type alias Point =
    { x : Int, y : Int }


main =
    let
        p =
            Point 1 2

        boolValue =
            True

        intValue =
            123

        floatValue =
            78.9

        stringValue =
            "string"
    in
    div []
        [ div [] [ text ("struct: " ++ debug p) ]
        , div [] [ text ("bool: " ++ Debug.toString boolValue) ]
        , div [] [ text ("int: " ++ String.fromInt intValue) ]
        , div [] [ text ("float: " ++ String.fromFloat floatValue) ]
        , div [] [ text ("string: " ++ stringValue) ]
        ]


debug : Point -> String
debug point =
    "Point { x = " ++ String.fromInt point.x ++ ", y = " ++ String.fromInt point.y ++ " }"

In this example, we’re using various techniques to format different types of data:

  • For the custom Point type, we define a debug function to create a string representation.
  • For booleans and complex types, we use Debug.toString.
  • For integers and floats, we use String.fromInt and String.fromFloat respectively.
  • For strings, we can use them directly.

Elm doesn’t have a direct equivalent to Go’s width and precision formatting for numbers. For more complex formatting needs, you would typically use a library or implement custom formatting functions.

Remember that in Elm, all functions are pure and there are no side effects in regular functions. The main function returns an HTML structure that the Elm runtime will render to the page.