JavaScript Strings

const single = 'hello'
const double = 'world'
const template = `hello ${double}` // 'hello world'
 
const multi = `Line 1
Line 2`

let s = 'hello'
s[0] = 'H' // does not mutate (ignored in strict mode)
s = s.toUpperCase() // must reassign — returns new string 'HELLO'

const s = 'hello'
 
s.length // 5
s[0] // 'h'
s.charAt(0) // 'h'
s.charAt(99) // '' — out of bounds, no error
s.at(-1) // 'o' — ES2022 negative index
s.at(-2) // 'l'

'A'.charCodeAt(0) // 65
String.fromCharCode(72, 105) // 'Hi'
'😀'.codePointAt(0) // 128512
String.fromCodePoint(0x1f600) // '😀'

'😀'.length // 2 — UTF-16 code units
;[...'😀'].length // 1 — spread by code point
Array.from('😀').length // 1

const email = 'user@company.io'
 
email.includes('@') // true
email.startsWith('user') // true
email.endsWith('.io') // true
email.indexOf('@') // 4
email.lastIndexOf('.') // 12
 
// Case-insensitive check
email.toLowerCase().includes('USER'.toLowerCase())

const s = 'hello world'
 
s.slice(0, 5) // 'hello' — [start, end)
s.slice(6) // 'world'
s.slice(-5) // 'world' — negative start
 
s.substring(0, 5) // 'hello' — swaps if start > end
s.substr(6, 5) // 'world' — deprecated, avoid

'Hello'.toLowerCase() // 'hello'
'hello'.toUpperCase() // 'HELLO'
 
'hello'.replace('l', 'x') // 'hexlo' — first only
'hello'.replaceAll('l', 'x') // 'hexxo'
'hello'.replace(/l/g, 'x') // 'hexxo'
 
// replace with callback
'user-name-id'.replace(/-(\w)/g, (_, ch) => ch.toUpperCase())
// 'userNameId'

'•'.repeat(3) // '•••'
'0'.repeat(4) // '0000'

'  hello  '.trim() // 'hello'
'  hello  '.trimStart() // 'hello  '
'  hello  '.trimEnd() // '  hello'
 
'42'.padStart(5, '0') // '00042'
'42'.padEnd(5, '-') // '42---'

String(orderId).padStart(6, '0') // '000042'

'a,b,c'.split(',') // ['a', 'b', 'c']
'a,b,c'.split(',', 2) // ['a', 'b'] — limit
'hello'.split('') // ['h','e','l','l','o']
 
;['a', 'b', 'c'].join('-') // 'a-b-c'

function reverseWords(s) {
  return s.trim().split(/\s+/).reverse().join(' ')
}

// Bad — O(n²) in many engines
let result = ''
for (const chunk of chunks) result += chunk
 
// Good — O(n)
const result = chunks.join('')

const name = 'Alice'
const salary = 90000
 
const msg = `Hello, ${name}! Salary: $${salary}`
 
const html = `
  <article>
    <h2>${name}</h2>
  </article>
`

function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) => {
    const val = values[i] ?? ''
    return acc + str + (val ? `<mark>${val}</mark>` : '')
  }, '')
}
 
const query = 'react'
highlight`Search results for ${query}`

String.raw`C:\new\folder` // 'C:\\new\\folder'

const slug = '  Hello World!  '
  .trim()
  .toLowerCase()
  .replace(/[^\w\s-]/g, '')
  .replace(/\s+/g, '-')
// 'hello-world'
 
;/^[\w.-]+@[\w.-]+\.\w+$/.test('user@co.io') // basic email check
 
'price: $10, tax: $2'.match(/\$(\d+)/g) // ['$10', '$2']
;[...'a1 b2'.matchAll(/\d+/g)].map((m) => m[0]) // ['1', '2']

const composed = 'e\u0301' // e + combining accent
composed.normalize('NFC') // single 'é'

const names = ['Zoe', 'alice', 'Bob']
names.sort((a, b) => a.localeCompare(b, 'en', { sensitivity: 'base' }))

new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(1499.99)
new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(new Date())

function highlightMatch(text, term) {
  if (!term) return text
  const i = text.toLowerCase().indexOf(term.toLowerCase())
  if (i === -1) return text
  return text.slice(0, i) + '<mark>' + text.slice(i, i + term.length) + '</mark>' + text.slice(i + term.length)
}

function truncate(str, max = 50) {
  if (str.length <= max) return str
  return str.slice(0, max - 1).trimEnd() + '…'
}

function parseQuery(search = '') {
  const params = new URLSearchParams(search.startsWith('?') ? search : `?${search}`)
  return Object.fromEntries(params.entries())
}
 
parseQuery('?page=2&sort=name') // { page: '2', sort: 'name' }

function toTitleCase(str) {
  return str
    .trim()
    .split(/\s+/)
    .map((w) => w[0].toUpperCase() + w.slice(1).toLowerCase())
    .join(' ')
}
 
function toSlug(str) {
  return str
    .trim()
    .toLowerCase()
    .replace(/[^\w\s-]/g, '')
    .replace(/\s+/g, '-')
}

const a = 'hello'
const b = 'world'
const c = `hello ${b}` // 'hello world'

const s = 'javascript'
s.length // 10
s[0] // 'j'
s[s.length - 1] // 't'
s.at(-1) // 't'

const s = 'hi'
s.charAt(0) // 'h'
s[0] // 'h'
s.charAt(5) // ''
s[5] // undefined

const s = 'hello'
s.at(-1) // 'o'
s.at(-2) // 'l'

let s = 'hello'
s[0] = 'H' // fails silently / strict: no effect
s = 'H' + s.slice(1) // 'Hello' — new string

'Hello'.toUpperCase() // 'HELLO'
'Hello'.toLowerCase() // 'hello'

const s = '  hello  '
s.trim() // 'hello'
s.trimStart() // 'hello  '
s.trimEnd() // '  hello'

const s = 'hello world'
s.includes('world') // true
s.startsWith('hello') // true
s.endsWith('ld') // true

const s = 'hello world hello'
s.indexOf('hello') // 0
s.lastIndexOf('hello') // 12
s.indexOf('xyz') // -1

const s = 'hello world'
s.slice(0, 5) // 'hello'
s.slice(6) // 'world'
s.slice(-5) // 'world'

'hello'.slice(-3) // 'llo'
'hello'.substring(-3) // 'hello' — negative → 0

'hello'.replace('l', 'x') // 'hexlo'

'hello'.replaceAll('l', 'x') // 'hexxo'
'hello'.replace(/l/g, 'x') // same with regex

'a,b,c'.split(',') // ['a','b','c']
'hello'.split('') // ['h','e','l','l','o']

;['hello', 'world'].join(' ') // 'hello world'
;['a', 'b', 'c'].join('-') // 'a-b-c'

'42'.padStart(5, '0') // '00042'
'42'.padEnd(5, '-') // '42---'

'-'.repeat(10) // '----------'
'ha'.repeat(3) // 'hahaha'

'A'.charCodeAt(0) // 65
String.fromCharCode(72, 105) // 'Hi'

'😀'.length // 2
;[...'😀'].length // 1

const name = 'Alice'
const role = 'admin'
 
const html = `<div class="user"><h2>${name}</h2><span>${role}</span></div>`

const articles = [
  { id: 1, title: '  Learn JavaScript  ', author: 'alice@company.io', tags: 'js,web,api' },
  { id: 2, title: 'React Hooks Guide', author: 'bob@mail.com', tags: 'react,hooks' },
  { id: 3, title: 'NODE.JS PERFORMANCE', author: 'carol@company.io', tags: 'node,perf' },
  { id: 4, title: 'css tricks for beginners', author: 'dave@mail.com', tags: 'css,ui' },
  { id: 5, title: 'API Design Patterns  ', author: 'eve@startup.io', tags: 'api,design,js' },
]

const cleaned = articles.map((a) => a.title.trim().toLowerCase())

const company = articles.filter((a) => a.author.includes('@company.io'))

const domains = articles.map((a) => a.author.split('@')[1])

function toSlug(title) {
  return title
    .trim()
    .toLowerCase()
    .replace(/[^\w\s-]/g, '')
    .replace(/\s+/g, '-')
}

const term = 'javascript'
const found = articles.filter((a) => a.title.toLowerCase().includes(term))

const withTagArrays = articles.map((a) => ({
  ...a,
  tagList: a.tags.split(','),
}))

articles.map((a) => a.tags.split(',').join(' | '))

articles.map((a) => String(a.id).padStart(4, '0'))
// ['0001', '0002', ...]

articles.map((a) => a.title.trim().replaceAll(' ', '_'))

function wordCount(title) {
  return title.trim().split(/\s+/).length
}

function reverseWords(s) {
  return s.trim().split(/\s+/).reverse().join(' ')
}

const allValid = articles.every((a) => a.author.endsWith('.com') || a.author.endsWith('.io'))

const usernames = articles.map((a) => a.author.split('@')[0])

function toTitleCase(str) {
  return str
    .trim()
    .split(/\s+/)
    .map((w) => w[0].toUpperCase() + w.slice(1).toLowerCase())
    .join(' ')
}

function truncate(str, max = 20) {
  const t = str.trim()
  if (t.length <= max) return t
  return t.slice(0, max - 1) + '…'
}

function searchArticles(list, term) {
  const q = term.toLowerCase()
  return list.filter((a) => a.title.toLowerCase().includes(q) || a.tags.toLowerCase().includes(q))
}

const tlds = articles.map((a) => a.author.slice(a.author.lastIndexOf('.')))
// '.io', '.com', ...

function parseLog(line) {
  const parts = line.replace(/^\[.*?\]\s*/, '').split(' ')
  return Object.fromEntries(parts.map((p) => p.split('=')).filter(([k]) => k))
}
 
parseLog('[ERROR] user=alice code=500')
// { user: 'alice', code: '500' }

function highlight(text, term) {
  const i = text.toLowerCase().indexOf(term.toLowerCase())
  if (i === -1) return text
  return text.slice(0, i) + '<mark>' + text.slice(i, i + term.length) + '</mark>' + text.slice(i + term.length)
}

const sorted = [...articles].sort((a, b) => a.title.trim().localeCompare(b.title.trim(), 'en', { sensitivity: 'base' }))

const emailRegex = /^[\w.-]+@[\w.-]+\.\w+$/
emailRegex.test('alice@company.io') // true
emailRegex.test('not-an-email') // false

'order 42 costs 19.99'.match(/\d+(\.\d+)?/g)
// ['42', '19.99']

const matches = [...'a1 b22 c333'.matchAll(/\d+/g)].map((m) => m[0])
// ['1', '22', '333']

const name = 'Alice'
const date = new Date().toDateString()
 
const card = `User: ${name}
Date: ${date}`

function strong(strings, ...values) {
  return strings.reduce((acc, str, i) => {
    const val = values[i] ?? ''
    return acc + str + (val ? `<strong>${val}</strong>` : '')
  }, '')
}
 
const name = 'Alice'
strong`Hello, ${name}!` // 'Hello, <strong>Alice</strong>!'

const winPath = String.raw`C:\Users\Alice\Documents`
// 'C:\\Users\\Alice\\Documents'

const composed = 'e\u0301'
composed.normalize('NFC') // 'é' (single code point)

function parseQuery(search = '') {
  const params = new URLSearchParams(search.startsWith('?') ? search : '?' + search)
  return Object.fromEntries(params.entries())
}
 
parseQuery('?page=2&sort=name')
// { page: '2', sort: 'name' }