Formatting interpolated strings in SwiftUI

Paul Hudson @twostraws July 1st 2021

Updated for Xcode 13.2

OK, let’s fix up that order total so that it’s accurate. We’re going to add a totalPrice computed property to our type, which will calculate the value of their tip, add it to the total for their order, and return that amount.

Please add this to CheckoutView now:

var totalPrice: String {
    let formatter = NumberFormatter()
    formatter.numberStyle = .currency

    let total = Double(order.total)
    let tipValue = total / 100 * Double(tipAmount)

    return formatter.string(from: NSNumber(value: total + tipValue)) ?? "$0"
}

Now, remember that SwiftUI will re-invoke our body property whenever any of our @State properties change. As a result, we can use that computed property right inside our layout, and it will automatically change as the segmented control changes:

Section(header:
    Text("TOTAL: \(totalPrice)")
) {

If you try that out you should see it all works great – the total price reflects the items we’re ordering, plus any tip the user selected. Plus, it’s neatly formatted as a currency thanks to NumberFormatter – yes, the NSNumber part is ugly, but at least it all works.

Our completed order form, showing options for payment type, loyalty card, and tip percentage, plus a button to confirm the order.