Space after symbol with JS Intl

Question

I want to format a currency with NumberFormat of Intl and get the returned value with a space " " between the symbol and the number.

new Intl.NumberFormat('pt-br', { style: 'currency', currency: 'USD' }).format(12345)
// "US$12.345,00"
new Intl.NumberFormat('pt-br', { style: 'currency', currency: 'BRL' }).format(12345)
// "R$12.345,00"

What I want: "US$ 12.345,00", "R$ 12.345,00"

Any ideas?

Answer 1

You can use replace to further format the currency.

var usd = new Intl.NumberFormat('pt-br', { style: 'currency', currency: 'USD' }).format(12345).replace(/^(\D+)/, '$1 ');

var euro = new Intl.NumberFormat('pt-br', { style: 'currency', currency: 'EUR' }).format(12345).replace(/^(\D+)/, '$1 ');
var deEuro = new Intl.NumberFormat('de', { style: 'currency', currency: 'EUR' }).format(12345).replace(/^(\D+)/, '$1 ');


console.log(usd);
console.log(euro);
console.log(deEuro);

Update

There is currently an issue with Intl.js where some browsers put a space between the currency and the value resulting in the output that OP wanted. In that case, the formatting above will result in 2 spaces (as seen in the comments below).

You can add on .replace(/\s+/g, ' ') to replace multiple spaces with a single space. This will ensure that if a space was added by the browser due to the above issue, the final output will still have a single space as expected.

var usd = new Intl.NumberFormat('pt-br', { style: 'currency', currency: 'USD' }).format(12345).replace(/^(\D+)/, '$1 ').replace(/\s+/, ' ');

var euro = new Intl.NumberFormat('pt-br', { style: 'currency', currency: 'EUR' }).format(12345).replace(/^(\D+)/, '$1 ').replace(/\s+/, ' ');
var deEuro = new Intl.NumberFormat('de', { style: 'currency', currency: 'EUR' }).format(12345).replace(/^(\D+)/, '$1 ').replace(/\s+/, ' ');


console.log(usd);
console.log(euro);
console.log(deEuro);

Answer 2

console.log(formatPrice(1200, 'en-US', 'USD'));
console.log(formatPrice(1200, 'fr-FR', 'EUR'));
  
 
function formatPrice(value, locale, currency) {
  return new Intl.NumberFormat(locale, { style: 'currency', currency })
    .format(value)
    // if the price begins with digit, place the space after the digit
    .replace(/^([\d,.]+)/, '$1 ')
    // if the price ends with digit, place the space before the digit
    .replace(/([\d,.]+)$/, ' $1') 
}

Answer 3

 "use client";
import React from "react";

interface Props {
  value: any; // your type
  className?: string;
}

function Currency({ value, className }: Props) {
  const formatter = new Intl.NumberFormat("en-IN", {
    style: "currency",
    currency: "INR",

    maximumFractionDigits: 3,
  });
  const [symbol, ...others] = formatter.formatToParts(value);
  return (
   



<span className={`flex items-center ${className}`}>
      <span className="currency">{symbol.value} </span>
      <span className="ml-2">{others.map(({ value }) => value).join("")}</span>
    </span>




  );
}

export default Currency;
  

This approach worked for me :)