Command Palette

Search for a command to run...

Hectal
Phase 4Beginner5 of 16 in JavaScript

Strings, Numbers and Dates

String methods, Unicode and emoji, regular expressions, Math and rounding money, Intl formatting, and dates and time zones without the usual bugs.

Almost every program handles text, numbers and dates: a name typed into a form, a price in a cart, the time an order was placed. This phase teaches the built-in tools JavaScript gives you for each of them, and the traps hidden inside them.

You'll learn the everyday string methods (cutting, searching, splitting, replacing, padding), why an emoji can have a length of 2 or more (Unicode), how to find patterns in text with regular expressions, how Math and rounding work (and why money needs care), how to show numbers and dates the way each country expects with **Intl**, and how the Date object, timestamps and time zones really work.

It builds on Phase 1 (strings and numbers basics) and Phase 3 (functions). Every example is live: change it, press Run, and compare the console with what you predicted. Later, Phase 5 uses many of these methods on arrays, and Hectal's /dsa course uses string tricks in its string problems.

0/6 · 0%
6 topics ~3 h 18 code blocks & diagrams
Start with the first topic
1
4.1

String Methods

Strings come with built-in methods to cut out pieces (slice), search (indexOf, includes, startsWith), split and join, replace text, trim spaces, pad to a width, repeat and read from the end (at). None of them change the original string: each returns a new one.

26 min 3 code practice

2
4.2

Unicode, Emoji and String Length

Every character has a Unicode number (a code point), but JavaScript stores strings as 16-bit pieces called UTF-16 code units, so length counts pieces, not characters: one emoji can have a length of 2, 4 or more. Use for...of, spread or Intl.Segmenter to work with real characters, and normalize() before comparing text.

21 min 3 code practice

3
4.3

Regular Expressions Basics

A regular expression (regex) is a small pattern language for describing text, like "three digits, a dash, then four digits". You write it as /pattern/flags and use it with test, match, matchAll, replace and split to check, find, extract and rewrite text.

26 min 3 code practice

4
4.4

Math and Rounding

The built-in Math object gives you rounding (round, floor, ceil, trunc), min/max, powers, roots and random numbers. Rounding has rules that surprise people, toFixed returns a string, and money is safest stored as whole paise or cents.

28 min 3 code practice

5
4.5

Formatting Numbers and Dates

The built-in Intl object formats numbers, money, percentages, units, dates and times the way each language and country expects: Intl.NumberFormat, Intl.DateTimeFormat and the toLocaleString shortcuts, plus helpers for relative times, lists, plurals and sorting.

28 min 3 code practice

6
4.6

Dates and Times

A Date stores a single moment as the number of milliseconds since 1 January 1970 UTC (a timestamp), and shows it either on the computer's local clock or in UTC. Months count from 0, setters change the object, parsing only works reliably for ISO strings, and the new Temporal API fixes most of these old problems.

28 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Turn a title into a URL slug

Blogs put a cleaned-up version of each title in the address, called a slug: Learn JS: Strings & Dates! becomes learn-js-strings-dates.

Beginner
2

An emoji-safe character counter

A profile bio allows 50 characters. The counter below uses text.length, so one thumbs-up with a skin tone counts as 4.

Beginner
3

Read log lines with a regex

A server writes lines like [2024-01-15 10:30] ERROR: Disk full.

Beginner
4

Split the bill to the paisa

Three friends share a ₹1000 dinner. Split it so the shares are whole paise, differ by at most one paisa, and add up exactly to the total.

Beginner
5

An event countdown card

Build a card for the Hectal JS Meetup, which starts at 2024-02-10T12:30:00Z. To keep the result testable, "now" is fixed at 2024-01-15T10:30:00Z.

Beginner