> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript String

A JavaScript `String` is a primitive data type representing an immutable sequence of zero or more 16-bit unsigned integer values. Each element in the string occupies a specific index and represents a UTF-16 code unit.

## Instantiation and Syntax

Strings can be created as primitives using literal syntax or as objects using the `String` constructor.

```javascript theme={"dark"}
// String Literals (Primitives)
const singleQuotes = 'literal';
const doubleQuotes = "literal";
const templateLiteral = `literal`; // Supports expression interpolation: `${var}`

// Type Coercion (Primitive)
const coercedString = String(100n); // "100"

// String Object (Wrapper Object)
const stringObject = new String("object"); 
typeof singleQuotes; // "string"
typeof stringObject; // "object"
```

## Immutability

String primitives are strictly immutable. Once a string is created, its sequence of code units cannot be altered. Operations that appear to modify a string actually allocate a new string in memory and return the new reference.

```javascript theme={"dark"}
let str = "Byte";
str[0] = "b"; // Fails silently (or throws TypeError in strict mode)
console.log(str); // "Byte"

str = "byte"; // Reassignment of the variable, not modification of the original string
```

## Encoding and the `length` Property

JavaScript strings use UTF-16 encoding. The `length` property returns the number of 16-bit code units, not necessarily the number of visible characters (graphemes). Characters within the Basic Multilingual Plane (BMP) require one code unit, while astral plane characters (like emojis or rare symbols) require two code units, known as a surrogate pair.

```javascript theme={"dark"}
const bmpChar = "A";
console.log(bmpChar.length); // 1

const astralChar = "🚀";
console.log(astralChar.length); // 2 (High and low surrogate code units)
```

## Autoboxing

When a property or method is accessed on a string primitive, JavaScript temporarily coerces the primitive into a `String` wrapper object, executes the method, and immediately discards the wrapper. This allows primitives to utilize the `String.prototype` API without the memory overhead of permanent objects.

```javascript theme={"dark"}
const primitive = "data";
// JS engine internally executes: new String("data").toUpperCase()
const upper = primitive.toUpperCase(); 
```

## Character Access

Individual code units can be accessed via zero-based indexing.

```javascript theme={"dark"}
const str = "Node";

// Bracket notation (returns undefined if out of bounds)
str[0]; // "N"

// charAt() method (returns empty string if out of bounds)
str.charAt(1); // "o"

// at() method (supports negative integers for reverse indexing)
str.at(-1); // "e"
```

## Core `String.prototype` API

The prototype provides methods for inspection, extraction, and transformation. All transformation methods return a new string.

**Extraction:**

```javascript theme={"dark"}
const str = "JavaScript";
str.slice(0, 4);      // "Java" (Extracts from start index to end index)
str.substring(4, 10); // "Script" (Similar to slice, but swaps indices if start > end)
```

**Inspection and Searching:**

```javascript theme={"dark"}
const str = "Runtime";
str.indexOf("time");    // 3 (Returns starting index, or -1 if not found)
str.includes("Run");    // true (Returns boolean)
str.startsWith("Run");  // true
str.endsWith("me");     // true
str.match(/[a-z]+/g);   // ["untime"] (Executes regex search, returns array of matches)
```

**Transformation:**

```javascript theme={"dark"}
const str = "  Parse  ";
str.trim();                  // "Parse" (Removes leading/trailing whitespace)
str.replace("P", "p");       // "  parse  " (Replaces first match)
str.replaceAll(/\s/g, "");   // "Parse" (Replaces all matches)
str.toLowerCase();           // "  parse  "
str.toUpperCase();           // "  PARSE  "
str.concat(" Tree");         // "  Parse   Tree"
```

**Deconstruction:**

```javascript theme={"dark"}
const str = "a,b,c";
str.split(","); // ["a", "b", "c"] (Splits string into an array based on a delimiter)
```

<div
  style={{ 
display: "flex", 
justifyContent: "space-between", 
alignItems: "center", 
maxWidth: "754px", 
padding: "1rem 0",
marginBottom: "24px"
}}
>
  <span style={{ fontWeight: "bold", fontSize: "1.25rem", color: "var(--tw-prose-headings)", fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" }}>Tired of Poor JavaScript Skills? Fix That With Deep Grasping!</span>

  <a
    href="https://syntblaze.com"
    target="_blank"
    style={{ 
  marginLeft: "24px",
  textDecoration: "none", 
  backgroundColor: "#007AFF",
  color: "#ffffff", 
  padding: "6px 16px", 
  borderRadius: "16px",
  fontSize: "0.9rem",
  fontWeight: "600",
  textAlign: "center",
  transition: "background-color 0.2s ease"
}}
  >
    Learn More
  </a>
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/skill-tracking.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=b9b0305c93bb501c9e767b5c76c88835" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/skill-tracking.png" />

  <img src="https://mintcdn.com/syntblazellc/23tyuOzaWS88qFlc/images/nuggets.png?fit=max&auto=format&n=23tyuOzaWS88qFlc&q=85&s=c86c80197299762989e9b882419b2109" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/nuggets.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/bite-sized-exercises.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=a65f9a38c37ff28ab73ed783c53c60e3" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/bite-sized-exercises.png" />
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap", marginTop: "12px" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/mastery-chain.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=748a1763454713e679260fbb95f154a2" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/mastery-chain.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-previews.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=242f61448ff5dd6deaaab2dccc13b507" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-previews.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-explanations.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=cf0fc1c31f9cd0fc26716781be05fbc9" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-explanations.png" />
</div>
