Skip to content
Guide Docs

String in JavaScript

📚 Strings in JavaScript

Strings in JavaScript are primitive data types used to represent and manipulate text. They are immutable sequences of characters that can include letters, numbers, symbols, and whitespace.

✨ Creating Strings

There are three ways to create strings in JavaScript:

// Using single quotes
const singleQuote = 'Hello';


// Using double quotes
const doubleQuote = "World";


// Using template literals (backticks)
const templateLiteral = `Hello, ${doubleQuote}!`;

String Creation Best Practices:

  • Use single quotes (') for simple strings
  • Use double quotes (") when the string contains single quotes
  • Use backticks (`) for:
    • Multi-line strings
    • String interpolation with ${}
    • Strings containing both single and double quotes

🔧 Essential String Methods

Basic Operations

// Length property
"JavaScript".length; // 10


// Accessing characters
"JavaScript"[0];     // "J"
"JavaScript".charAt(0); // "J"


// Finding substrings
"JavaScript".indexOf("Script");    // 4
"JavaScript".lastIndexOf("a");     // 3
"JavaScript".includes("Script");   // true
"JavaScript".startsWith("Java");   // true
"JavaScript".endsWith("Script");   // true

Case Manipulation

"hello".toUpperCase();           // "HELLO"
"WORLD".toLowerCase();           // "world"
"javascript".toLocaleUpperCase(); // "JAVASCRIPT" (locale-sensitive)

String Extraction

// slice(startIndex, endIndex)
"JavaScript".slice(0, 4);     // "Java"
"JavaScript".slice(-6);       // "Script"


// substring(startIndex, endIndex)
"JavaScript".substring(4, 10); // "Script"


// substr(startIndex, length) - deprecated but good to know
"JavaScript".substr(4, 6);     // "Script"

String Modification

// Replace first occurrence
"Hello World".replace("World", "JavaScript");  // "Hello JavaScript"


// Replace all occurrences
"hello hello".replaceAll("hello", "hi");       // "hi hi"


// Trim whitespace
"  Trim Me  ".trim();      // "Trim Me"
"  Trim Me  ".trimStart(); // "Trim Me  "
"  Trim Me  ".trimEnd();   // "  Trim Me"


// Padding
"5".padStart(3, "0");     // "005"
"5".padEnd(3, "0");       // "500"

String Splitting and Joining

// Split string into array
"a,b,c".split(",");           // ["a", "b", "c"]
"hello".split("");            // ["h", "e", "l", "l", "o"]


// Join array into string
["a", "b", "c"].join("-");    // "a-b-c"

💫 Template Literals (Template Strings)

Template literals offer powerful string formatting capabilities:

const name = "Alice";
const age = 25;


// String interpolation
const greeting = `Hello, ${name}!`;


// Multi-line strings
const multiLine = `
  User Details:
  Name: ${name}
  Age: ${age}
  Status: ${age >= 18 ? 'Adult' : 'Minor'}
`;


// Tagged templates
function myTag(strings, ...values) {
  return strings.reduce((result, str, i) =>
    `${result}${str}${values[i] || ''}`, '');
}


const tagged = myTag`Hello ${name}!`;

🎯 String Comparison

// Basic comparison
"hello" === "hello";   // true
"Hello" === "hello";   // false


// Case-insensitive comparison
"Hello".toLowerCase() === "hello".toLowerCase(); // true


// Locale-aware comparison
"hello".localeCompare("hello");    // 0 (equal)
"a".localeCompare("b");           // -1 (comes before)
"b".localeCompare("a");           // 1 (comes after)

⚠️ Common Pitfalls and Best Practices

  1. String vs String Object:
// Primitive string (recommended)
const str1 = "hello";


// String object (avoid)
const str2 = new String("hello");


typeof str1;  // "string"
typeof str2;  // "object"
  1. Performance Considerations:
// Bad: Creates many intermediate strings
let result = "";
for (let i = 0; i < 1000; i++) {
    result += i;
}


// Good: Uses array joining
const numbers = Array.from({length: 1000}, (_, i) => i);
const result = numbers.join("");
  1. Unicode Support:
// Using Unicode escape sequences
const heart = "\u2764";     // ❤
const smile = "\u{1F604}";  // 😄


// String length with Unicode
"😄".length;               // 2 (surrogate pair)
[..."😄"].length;          // 1 (actual character count)

📦 Summary

  • Strings in JavaScript are immutable primitive values
  • Use template literals for dynamic string construction
  • Choose appropriate methods based on your needs:
    • slice() for extraction
    • replace()/replaceAll() for substitution
    • split()/join() for array conversion
    • includes()/startsWith()/endsWith() for searching
  • Consider performance implications when manipulating large strings
  • Be aware of Unicode handling when working with special characters

🔗 Additional Resources