JavaScript String Basics

Strings in JavaScript are used to represent textual data. Unlike some other programming languages, JavaScript doesn’t have a separate character data type – a string can represent both single characters and longer text.

Key Point: JavaScript strings are immutable, meaning once created, they cannot be changed. Any operation that seems to modify a string actually creates a new string.

String Declaration Methods

Different Ways to Create Strings

// Using single quotes
const singleQuotes = 'I am not new to JavaScript';

// Using double quotes
const doubleQuotes = "I am not new to JavaScript";

// Using backticks (template literals - ES6)
const backticks = `I am not new to JavaScript`;

// Using the String constructor (less common)
const stringObject = new String("I am not new to JavaScript");

console.log(singleQuotes);
console.log(doubleQuotes);
console.log(backticks);
console.log(stringObject); // This creates a String object, not a primitive

Working with Quotes and Escape Sequences

Handling Quotes Within Strings

// Using different quote types
const quote1 = "I'm not new to JavaScript"; // Double quotes allow single quotes inside
const quote2 = 'He said: "I am not new to JavaScript"'; // Single quotes allow double quotes inside

// Using escape sequences
const escaped1 = 'I\'m not new to JavaScript'; // Escape single quote
const escaped2 = "He said: \"I am not new to JavaScript\""; // Escape double quotes

console.log(quote1);
console.log(quote2);
console.log(escaped1);
console.log(escaped2);

Common Escape Sequences

// New line
const newLine = 'Line 1\nLine 2';
console.log(newLine);

// Tab
const tab = 'Name:\tJohn';
console.log(tab);

// Backslash
const backslash = 'This is a backslash: \\';
console.log(backslash);

// Carriage return
const carriageReturn = 'Hello\rWorld';
console.log(carriageReturn);

Working with Unicode Characters

Basic Unicode Characters

// Copyright symbol (00A9)
const copyright = '\u00A9';
console.log(copyright); // ©

// Euro symbol (20AC)
const euro = '\u20AC';
console.log(euro); // €

// Heart symbol (2665)
const heart = '\u2665';
console.log(heart); // ♥

// Using Unicode in strings
const message = 'Copyright \u00A9 2023';
console.log(message); // "Copyright © 2023"

Long Unicode Characters (Emoji)

// Smiling face with smiling eyes (1F60A)
const smiley = '\u{1F60A}'; // Note the curly braces for long Unicode
console.log(smiley); // 😊

// Thumbs up (1F44D)
const thumbsUp = '\u{1F44D}';
console.log(thumbsUp); // 👍

// Globe showing Americas (1F30E)
const globe = '\u{1F30E}';
console.log(globe); // 🌎

// Using multiple emoji
const emojiMessage = `I love JavaScript! \u{1F60A} \u{1F44D}`;
console.log(emojiMessage); // "I love JavaScript! 😊 👍"

\u00A9
©

\u2665
♥

\u{1F60A}
😊

\u{1F44D}
👍

\u{1F30E}
🌎

String Length and Character Access

Working with String Properties

const str = 'Hello';

// Get string length
console.log(str.length); // 5

// Access characters (bracket notation)
console.log(str[0]); // 'H'
console.log(str[4]); // 'o'
console.log(str[10]); // undefined (no error)

// Access characters (charAt method)
console.log(str.charAt(0)); // 'H'
console.log(str.charAt(4)); // 'o'
console.log(str.charAt(10)); // '' (empty string)

// Strings are immutable
str[0] = 'X'; // This won't work
console.log(str); // Still 'Hello'

Common String Operations

Basic String Methods

const text = '   JavaScript Programming   ';

// Convert to uppercase
console.log(text.toUpperCase()); // '   JAVASCRIPT PROGRAMMING   '

// Convert to lowercase
console.log(text.toLowerCase()); // '   javascript programming   '

// Remove whitespace from both ends
console.log(text.trim()); // 'JavaScript Programming'

// Extract part of a string
console.log(text.slice(3, 10)); // 'JavaScr'

// Replace text
console.log(text.replace('Programming', 'Coding')); // '   JavaScript Coding   '

// Check if string contains substring
console.log(text.includes('Script')); // true

Best Practices

  • Use single quotes for simple strings and double quotes when you need to include apostrophes
  • Use template literals (backticks) for multi-line strings and string interpolation
  • Remember that strings are immutable – operations return new strings
  • Use the appropriate escape sequences for special characters
  • For long Unicode characters, use curly braces: \u{1F60A}
  • Be consistent with your quote style throughout your codebase