This is very close to being off–topic as opinion based, but here goes anyway.
Which one of these should I use?
Date.prototype.toLocaleString was originally solely implementation dependent and varied quite a bit across browsers. When support for the Intl object was added (ECMAScript 2015, ed 6) then toLocaleString was allowed to support the same options. While support isn't mandated by ECMA-262, probably all current implementations support it.
Note that this did not remove the allowed implementation variability, it just provided some formatting options based on language, region and dialect (and also timezone options based on the IANA time zone database identifiers and values).
The Intl object (and hence toLocaleString) is based on ECMA-402, which doesn't strictly specify formatting, so there is still some room for implementations to differ. The biggest differences are in regard to timezone names (for which there is no standard) and placement of commas, spaces, etc.
However, for most practical purposes, whether you use the Intl object or toLocaleString is up to you, I don't think there's any technical reason to prefer one over the other. While the results for both should be identical for a particular implementation, don't expect the resulting string to be exactly identical across implementations or to conform to a particular format for a given BCP 47 language tag.
Answer from RobG on Stack OverflowJavaScript Intl.DateTimeFormat.format vs Date.toLocaleString - Stack Overflow
Mastering date formatting using Intl.DateTimeFormat in JavaScript
Ability to specify a custom format for Intl.DateTimeFormat
How to format a JavaScript date object using Intl.DateTimeFormat - Stack Overflow
Videos
This is very close to being off–topic as opinion based, but here goes anyway.
Which one of these should I use?
Date.prototype.toLocaleString was originally solely implementation dependent and varied quite a bit across browsers. When support for the Intl object was added (ECMAScript 2015, ed 6) then toLocaleString was allowed to support the same options. While support isn't mandated by ECMA-262, probably all current implementations support it.
Note that this did not remove the allowed implementation variability, it just provided some formatting options based on language, region and dialect (and also timezone options based on the IANA time zone database identifiers and values).
The Intl object (and hence toLocaleString) is based on ECMA-402, which doesn't strictly specify formatting, so there is still some room for implementations to differ. The biggest differences are in regard to timezone names (for which there is no standard) and placement of commas, spaces, etc.
However, for most practical purposes, whether you use the Intl object or toLocaleString is up to you, I don't think there's any technical reason to prefer one over the other. While the results for both should be identical for a particular implementation, don't expect the resulting string to be exactly identical across implementations or to conform to a particular format for a given BCP 47 language tag.
If you re-use the same format a lot of times, re-using Intl.DateTimeFormat object seems to be better from a performance perspective.
const format = {
weekday: 'long',
month: 'long',
day: '2-digit',
};
const dateTimeFormat = new Intl.DateTimeFormat('en', format);
const start1 = performance.now();
for (let i = 0; i < 10000; i++) dateTimeFormat.format(new Date());
console.log('re-use Intl.DateTimeFormat', performance.now() - start1);
const start2 = performance.now();
for (let i = 0; i < 10000; i++) new Date().toLocaleString('en', format);
console.log('use toLocaleString', performance.now() - start2);When I run this snippet in Chrome 105, it gives me a result like this:
re-use Intl.DateTimeFormat 17.299999952316284
use toLocaleString 876.0999999046326
Here's my version of this, you can use formatToParts() function to get them by part assuming you will be using the same format every time, and then get them by object array so that you can create your own format allowing you to add custom text. Although it would be much more easier and efficient if you will use some other Date formatter.
let checkoutDate = new Date();
var th = 'th';
var formatter = new Intl.DateTimeFormat('en-us', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
fractionalSecondDigits: 3,
timeZone: 'UTC'
});
var formatted = formatter.formatToParts(checkoutDate);
var day = formatted[4].value;
var wr = checker(day);
console.log(wr);
console.log(formatted[0].value+ ',', day +wr, formatted[2].value, formatted[6].value);
function checker(x){
if (x > 3 && x < 21) return 'th';
switch (x % 10) {
case 1: return "st";
case 2: return "nd";
case 3: return "rd";
default: return "th";
}
}
//output Friday, 13th March 2020
You can try this way:
var isoString = new Date().toISOString();
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var date = new Date(isoString);
var americanDate = new Intl.DateTimeFormat("en-US", options).format(date);
console.log(americanDate); //Friday, March 13, 2020
Using moment.js you can do better date-time format.