Formatting — Complete Guide
Formatting — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of JavaScript Tutorial on Toolliyo Academy.
On this page
JavaScript Tutorial · Lesson 39 of 100
Formatting
Basics ✓ → Objects & data → Async & DOM → Advanced → Tools → Projects
Intermediate · 2 — Built-in types & objects · ~6 min · JS Strings, Dates & RegEx
What is this?
Formatting turns values into display strings — dates for users, currency, padded order IDs.
Why should you care?
Users see formatted text; databases store raw values.
See it live — copy this example
Paste into an HTML file or the browser console (F12). Use Run below when the live editor is available.
const n = 7;
console.log(String(n).padStart(3, "0"));
console.log((1234.5).toLocaleString("en-IN"));
console.log(new Date().toLocaleDateString("en-IN"));Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- padStart adds leading zeros.
- toLocaleString uses locale grouping.
- Combine parsing + formatting in forms.
Practice next
- Use padStart for ORDER-0042 style IDs.
- Format 1234.5 with toLocaleString en-IN.
- Show today with toLocaleDateString.
- Build a countdown mm:ss display from total seconds with padStart.
- Format file size bytes into KB/MB strings for upload UI.
Remember
padStart/padEnd toLocaleString Format for display only
ScriptVerse invoice IDs
Order numbers display as INV-000128 while the database stores integer 128.
Outcome: Display formatting keeps UX polished without changing stored data types.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
