JavaScript String Methods: Beginner Guide to Text Manipulation with Real Examples

let website = "stackra";

website.toUpperCase();
console.log(website); // Still "stackra"!

// To save the result, reassign or store in a new variable:
website = website.toUpperCase();
console.log(website); // "STACKRA"

let userPassword = "pass123";

if (userPassword.length < 8) {
  console.log("Password is too short. It must be at least 8 characters.");
} else {
  console.log("Password accepted!");
}
// Output: Password is too short. It must be at least 8 characters.

const framework = "Next.js";

console.log(framework.at(0));  // "N" (first letter)
console.log(framework.at(1));  // "e" (second letter)
console.log(framework.at(-1)); // "s" (last letter)
console.log(framework.at(-2)); // "." (second to last)

const name = "Stackra";

console.log(name.charAt(0));                 // "S"
console.log(name.charAt(name.length - 1));   // "a" (cumbersome way to get the last letter)

let text = "HELLO";

// Gets 16-bit UTF-16 code (Good for basic English letters)
console.log(text.charCodeAt(0)); // 72 ("H")

// Gets full Unicode code point (Best for Emojis)
let rocket = "🚀";
console.log(rocket.codePointAt(0)); // 128640

let file = "banner-image.png";

// Grab the file extension:
let extension = file.slice(-3);
console.log(extension); // "png"

// Grab the filename without extension:
let fileNameOnly = file.slice(0, 12);
console.log(fileNameOnly); // "banner-image"

let file = "banner-image.png";

// Grab the file extension:
let extension = file.slice(-3);
console.log(extension); // "png"

// Grab the filename without extension:
let fileNameOnly = file.slice(0, 12);
console.log(fileNameOnly); // "banner-image"

let emailInput = "   alex@example.com  \n";

// Remove spaces from both ends:
let cleanEmail = emailInput.trim();
console.log(cleanEmail); // "alex@example.com"

// Trim only the beginning:
console.log("   Welcome".trimStart()); // "Welcome"

// Trim only the end:
console.log("Welcome   ".trimEnd());   // "Welcome"

let searchInput = "REACT";
let databaseCategory = "react";

// Case-insensitive comparison:
if (searchInput.toLowerCase() === databaseCategory.toLowerCase()) {
  console.log("Match found!");
}

// Example A: Mask a credit card (Show only the last 4 digits)
let fullCard = "1234567812348899";
let last4 = fullCard.slice(-4);
let maskedCard = last4.padStart(fullCard.length, "*");
console.log(maskedCard); // "************8899"

// Example B: Formatting numbers with leading zeros
let invoiceNumber = 42;
let formattedInvoice = String(invoiceNumber).padStart(5, "0");
console.log(formattedInvoice); // "00042"

let productCode = "SKU-";
console.log(productCode.padEnd(8, "0")); // "SKU-0000"

let starRating = "⭐".repeat(5);
console.log(starRating); // "⭐⭐⭐⭐⭐"

let firstName = "Nguyen";
let lastName = "Huy";

// Method A: .concat()
let fullNameConcat = firstName.concat(" ", lastName);

// Method B: Modern Template Literal (Best Practice)
let fullNameModern = `${firstName} ${lastName}`;
console.log(fullNameModern); // "Nguyen Huy"

let goodText = "Hello World 🚀";
console.log(goodText.isWellFormed()); // true

let brokenText = "Broken emoji: \uD800"; // Cut halfway through
console.log(brokenText.isWellFormed()); // false

// Fix corrupted text automatically before sending to backend/API:
let safeText = brokenText.toWellFormed();
console.log(safeText); // "Broken emoji: "