An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
Some of Our Sources
- Pearsonified
- Smashing Apps
- Vandelay Design
- Creative Curio
- Fuel Your Creativity
- Web Designer Depot
- FanExtra - PSD
- Reencoded
- Wal You
- The Verge
Help Webnuz
Referal links:
.toLocaleString, one of the most underrated JavaScript features
.toLocaleString and friends are some of the most underrated features of JavaScript. I came over them through a few different wanderings through MDN and I've used them in like every project since.
Here, I'll show you how you can use them in your own code.
.toLocaleString is for formatting
.toLocaleString is a method present on dates and numbers, which is used to format them in a locale-specific way.
new Date().toLocaleString()// => 24/4/2022, 10:40:00 amBy default, it will use the browser's locale, but you can specify a different one with the locale parameter.
console.log(new Date().toLocaleString('en-US'))// => 4/24/2022, 10:40:00 AMconsole.log(new Date().toLocaleString('en-GB'))// => 24/04/2022, 10:40:00console.log(new Date().toLocaleString('ko-KR'))// => 2022. 4. 24. 10:40:49You can further customize the output by specifying the format of the date.
console.log(new Date().toLocaleString('en-US', { year: 'numeric', weekday: 'long', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false,}))// => Sunday, April 24, 2022 at 10:40:00console.log(new Date().toLocaleString('en-US', { dateStyle: 'full',}))// => Sunday, April 24, 2022console.log(new Date().toLocaleString('en-US', { dateStyle: 'full', timeStyle: 'full',}))// => Sunday, April 24, 2022 at 10:40:00 AM India Standard Timeconsole.log(new Date().toLocaleString('en-US', { calendar: 'indian',}))// => 2/4/1944 Saka, 10:40:00 AM// I don't know what that means eitherconsole.log(new Date().toLocaleString('en-US', { dayPeriod: 'long',}))// => in the morningconsole.log(new Date().toLocaleString('en-US', { era: 'long', dayPeriod: 'long', weekday: 'long', month: 'long', year: 'numeric', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', fractionalSecondDigits: 3, timeZoneName: 'long',}))// => Sunday, April 24, 2022 Anno Domini at 10:00:00.124 in the morning India Standard TimeThis totally eliminates the need of date formatting libraries like Moment.js in your code!
Numbers too!
.toLocaleString is also a method present on numbers, which is used to format them in a locale-specific way.
console.log(10000000..toLocaleString())// => 10,000,000As usual, you can specify a different locale with the locale parameter.
console.log(10000000..toLocaleString('ar-EG'))// => // Another language I knowThis one also has options.
// currency10000..toLocaleString('en-US', {style: 'currency', currency: 'USD'})// => $10,000.0010000..toLocaleString('en-US', {style: 'currency', currency: 'USD', currencyDisplay: 'name'})// => 10,000.00 US dollars(-11.29).toLocaleString('en-US', {style: 'currency', currency: 'USD', currencySign: 'accounting'})// => ($11.29)(-11.29).toLocaleString('en-US', {style: 'currency', currency: 'USD', currencySign: 'standard'})// => -$11.29// scientific10000..toLocaleString('en-US', {notation: 'scientific'})// => 1E410000..toLocaleString('en-US', {notation: 'compact'})// => 10K1234..toLocaleString('en-US', {notation: 'compact'})// => 1.2K1234..toLocaleString('en-US', {notation: 'engineering'})// => 1.234E31234..toLocaleString('en-US', {notation: 'engineering', signDisplay: 'always'})// => +1.234E30.55.toLocaleString('en-US', {style: 'percent'})// => 55%1234..toLocaleString('en-US', {style: 'unit', unit: 'liter'})// => 1,234 L1234..toLocaleString('en-US', {style: 'unit', unit: 'liter', unitDisplay: 'narrow'})// => 1,234LOnce again, this removes the need for a ton of libraries for number formatting!
That was one of the most surprising JavaScript moments for me. Sure, I knew that JavaScript was aware of timezones, but getting access to a whole formatting library?
Original Link: https://dev.to/siddharthshyniben/tolocalestring-one-of-the-most-underrated-javascript-features-lid
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To