**Quick reference:** strings are immutable, so every method below returns a **new** value and leaves the original string unchanged. | Task | Methods | |---|---| | Search | `includes()`, `startsWith()`, `endsWith()`, `indexOf()` | | Extract | `slice()`, `substring()`, `at()` | | Change case | `toUpperCase()`, `toLowerCase()` | | Clean up | `trim()`, `trimStart()`, `trimEnd()` | | Replace | `replace()`, `replaceAll()` | | Pad / repeat | `padStart()`, `padEnd()`, `repeat()` | | Split into an array | `split()` | ## String Methods in JavaScript 📝 You've already been using strings since the first [JavaScript](/courses/javascript) chapter. Like this: ```javascript id="ndw57r" const name = 'Alice'; ``` Or: ```javascript id="n0exz8" const message = "Hello World"; ``` Or even: ```javascript id="gk0exh" const greeting = `Hello ${name}!`; ``` Strings look simple... but they are one of the most useful things you'll work with in [JavaScript](/courses/javascript). Think: * Usernames 👤 * Emails 📧 * Search queries 🔍 * URLs 🌐 * Form inputs 📝 * Messages 💬 * API responses * File names * Slugs * Titles * Content Text is everywhere. So JavaScript gives us a LOT of tools for working with it. --- # What Is a String? 🧠 A **string** is a sequence of characters used to represent text. Example: ```javascript id="oa6mpr" const language = 'JavaScript'; ``` This value: ```text id="mj7w7m" JavaScript ``` is a string. Strings can contain: ```text id="1mazps" Letters Numbers Spaces Symbols Emojis Almost any textual content ``` --- # Creating Strings ✨ JavaScript gives us three common ways. ## Single Quotes ```javascript id="wnnctm" const name = 'Alice'; ``` --- ## Double Quotes ```javascript id="l3lbvh" const name = "Alice"; ``` --- ## Backticks ```javascript id="b55mxd" const name = `Alice`; ``` All three create strings. But backticks unlock something extra: # Template Literals 🚀 --- # Template Literals Template literals use: ```text id="pp2cb6" `backticks` ``` Instead of: ```text id="29i4qs" 'single quotes' "double quotes" ``` They make working with dynamic text much easier. --- # String Interpolation `${}` Suppose: ```javascript id="6lxgyl" const name = 'Alice'; const age = 25; ``` Old-style concatenation: ```javascript id="bc14p9" const message = 'My name is ' + name + ' and I am ' + age + ' years old.'; ``` It works... but it's not exactly beautiful. 😭 Template literal: ```javascript id="pc2b74" const message = `My name is ${name} and I am ${age} years old.`; ``` Much cleaner. --- # Expressions Inside `${}` ⚡ You're not limited to variables. You can use expressions too. ```javascript id="1e4tfp" const age = 25; console.log( `Next year I'll be ${age + 1}.` ); ``` Output: ```text id="78dnxd" Next year I'll be 26. ``` You can even do: ```javascript id="ykbmwr" const score = 85; console.log( `Result: ${ score >= 50 ? 'Passed ✅' : 'Failed ❌' }` ); ``` Template literals can evaluate JavaScript expressions inside: ```javascript id="btxfl7" ${...} ``` --- # Multi-Line Strings 📄 Without template literals, multi-line strings used to be awkward. With backticks: ```javascript id="uauf0u" const message = ` Hello Alice, Welcome to asif.to 🚀 Keep learning JavaScript! `; ``` JavaScript preserves the line breaks. This is useful for: * [HTML](/courses/html) snippets * Emails * Templates * Generated text * Multi-line messages --- # Example: Generate HTML ```javascript id="vh1lg9" const name = 'Alice'; const role = 'Developer'; const card = `

${name}

${role}

`; console.log(card); ``` You’ll see patterns like this in many real applications. --- # Tagged Templates 👀 You may eventually encounter syntax like: ```javascript id="jsfpk2" myTag`Hello ${name}`; ``` This is called a **tagged template**. It lets a [function](/javascript/functions-in-javascript) process a template literal. Libraries have used this pattern for things like styling and custom template processing. This is an advanced feature. For now, just know: > Template literals can do more than simple interpolation. You don't need tagged templates for everyday beginner JavaScript. --- # Strings Are Immutable 🔒 This is an important concept. Suppose: ```javascript id="c2aoi3" const word = 'hello'; ``` You might try: ```javascript id="7xgz3q" word[0] = 'H'; ``` But the original string doesn't change. Strings are: > **Immutable** That means their existing characters cannot be modified in place. Instead, string methods usually return **new strings**. Example: ```javascript id="cjly81" const word = 'hello'; const upper = word.toUpperCase(); console.log(word); console.log(upper); ``` Output: ```text id="b3lv35" hello HELLO ``` The original stayed unchanged. --- # Strings Are Primitive Values Strings are primitives. ```javascript id="xmytbs" console.log( typeof 'hello' ); ``` Output: ```text id="jz5u7z" string ``` But then... how can this work? ```javascript id="1us27y" 'hello'.toUpperCase(); ``` If strings are primitives, where does the method come from? 🤔 --- # Autoboxing 📦 Very simplified: When you use something like: ```javascript id="yhr1hi" 'hello'.toUpperCase() ``` JavaScript temporarily gives the primitive access to String-related functionality. This behavior is commonly called: **Autoboxing** You don't need to manually create: ```javascript id="vmf9f1" new String('hello'); ``` In fact, you usually shouldn't. Stick with primitive strings: ```javascript id="67c25f" const value = 'hello'; ``` --- # `.length` — String Length 📏 Use: ```javascript id="2pwphj" .length ``` Example: ```javascript id="5y9x48" const language = 'JavaScript'; console.log( language.length ); ``` Output: ```text id="qhd51m" 10 ``` Spaces count too. ```javascript id="vge70o" console.log( 'Hello World'.length ); ``` Output: ```text id="msltbg" 11 ``` --- # A Unicode Surprise With Emojis 😵‍💫 Try: ```javascript id="qo1ylb" console.log( '😀'.length ); ``` You might expect: ```text id="l45mw6" 1 ``` But JavaScript gives: ```text id="o5vcxs" 2 ``` Why? JavaScript's string length counts **UTF-16 code units**, not necessarily user-perceived characters. Some characters, including many emojis, need more than one UTF-16 code unit. --- # Counting Some Unicode Characters More Naturally Spread can help with many Unicode code points: ```javascript id="zpk41n" console.log([ ...'😀' ].length); ``` Output: ```text id="8bjby9" 1 ``` Unicode can get much deeper than this. For now, remember: > `.length` is not always the same as "number of visible characters." --- # Accessing Characters 🔍 Suppose: ```javascript id="cr3wqk" const language = 'JavaScript'; ``` Indexes start from: ```text id="u6up62" 0 ``` So: ```javascript id="d2ek8q" console.log( language[0] ); ``` Output: ```text id="6mmz2j" J ``` And: ```javascript id="ww43aw" console.log( language[4] ); ``` Output: ```text id="t3p7fz" S ``` --- # `.at()` — Modern Character Access ✨ You can also write: ```javascript id="5ir77g" language.at(0); ``` Output: ```text id="n6a0fw" J ``` The nice part is negative indexes: ```javascript id="0smg3u" language.at(-1); ``` Output: ```text id="mofo4z" t ``` Meaning: > Give me the last character. --- # Negative `.at()` Examples ```javascript id="i5nwoa" const word = 'JavaScript'; console.log( word.at(-1) ); console.log( word.at(-2) ); console.log( word.at(-3) ); ``` Output: ```text id="4dv2yc" t p i ``` Very convenient. --- # `charAt()` Older JavaScript code often uses: ```javascript id="jyfmiq" str.charAt(index) ``` Example: ```javascript id="kfpo27" const word = 'JavaScript'; console.log( word.charAt(0) ); ``` Output: ```text id="ziil6l" J ``` You'll still encounter it, but bracket notation and `.at()` are often more convenient today. --- # `charCodeAt()` 🔢 `charCodeAt()` returns the UTF-16 code unit value at a given position. Example: ```javascript id="5v1u7x" console.log( 'J'.charCodeAt(0) ); ``` Output: ```text id="9od7rp" 74 ``` This is more useful in Unicode-related or low-level text operations than everyday application code. --- # `String.fromCharCode()` The reverse idea: ```javascript id="r6m9zl" console.log( String.fromCharCode(74) ); ``` Output: ```text id="rhfw0a" J ``` Again, useful to know, but not something you'll use constantly. --- # Searching Inside Strings 🔍 JavaScript gives us several methods for answering questions like: ```text id="ntdpv9" Does this word exist? Where does it start? Does the text begin with something? Does it end with something? ``` Let's go through them. --- # `includes()` — Does It Exist? ✅ Example: ```javascript id="ex4c1m" const text = 'Learn JavaScript with asif.to'; console.log( text.includes('JavaScript') ); ``` Output: ```text id="jxc2yz" true ``` If not: ```javascript id="s4njpj" console.log( text.includes('Python') ); ``` Output: ```text id="c4st7d" false ``` --- # Searches Are Case-Sensitive 🚨 ```javascript id="53v1pu" const text = 'JavaScript'; console.log( text.includes('javascript') ); ``` Output: ```text id="0jg7x4" false ``` Because: ```text id="r3yidk" JavaScript ``` is not exactly: ```text id="tob3pd" javascript ``` One common solution: ```javascript id="fgrwuq" text .toLowerCase() .includes('javascript'); ``` --- # `indexOf()` — Find the Position 📍 ```javascript id="01wpyg" const text = 'JavaScript is awesome'; console.log( text.indexOf('awesome') ); ``` Output: ```text id="4lltbk" 14 ``` If it doesn't exist: ```javascript id="fjfutg" text.indexOf('Python'); ``` returns: ```text id="jtk0d2" -1 ``` --- # Start Searching From a Position ```javascript id="r1xmwn" const text = 'banana'; console.log( text.indexOf('a', 2) ); ``` JavaScript begins searching from index `2`. Useful when the same character appears multiple times. --- # `lastIndexOf()` 🔙 Want the last occurrence? ```javascript id="m3j84o" const text = 'one two one'; console.log( text.lastIndexOf('one') ); ``` It returns the starting index of the last match. --- # `startsWith()` 🚀 ```javascript id="p0u1l6" const url = 'https://asif.to'; console.log( url.startsWith('https://') ); ``` Output: ```text id="wtuqam" true ``` Very useful for: * URLs * Prefixes * File paths * Commands * IDs --- # `startsWith()` From a Position ```javascript id="yahmqe" const text = 'Hello JavaScript'; console.log( text.startsWith( 'JavaScript', 6 ) ); ``` Output: ```text id="x0vsua" true ``` --- # `endsWith()` 🏁 ```javascript id="77i5ks" const file = 'profile.jpg'; console.log( file.endsWith('.jpg') ); ``` Output: ```text id="xf1592" true ``` Common uses: ```text id="x3iypj" File extensions Domains Suffixes Validation ``` --- # Search Method Cheat Sheet 🧠 ```text id="ezkcv4" includes() → Does it exist? indexOf() → Where is the first match? lastIndexOf() → Where is the last match? startsWith() → Does it start with this? endsWith() → Does it end with this? ``` --- # Changing String Case 🔠 Use: ```javascript id="8n4xek" toUpperCase() ``` Example: ```javascript id="v67l44" console.log( 'hello'.toUpperCase() ); ``` Output: ```text id="et138b" HELLO ``` --- # `toLowerCase()` ```javascript id="11r1h4" console.log( 'HELLO'.toLowerCase() ); ``` Output: ```text id="0lt4xi" hello ``` --- # Practical Case-Insensitive Search 🔍 Suppose: ```javascript id="8chx8n" const title = 'Learn JavaScript'; const search = 'javascript'; ``` You can write: ```javascript id="jnfpl8" const matches = title .toLowerCase() .includes( search.toLowerCase() ); console.log(matches); ``` Output: ```text id="6h7c13" true ``` This is a common pattern for simple search interfaces. --- # `trim()` — Remove Extra Whitespace 🧹 User input often comes with unwanted spaces. Example: ```javascript id="ew26iz" const username = ' Alice '; ``` Use: ```javascript id="hy37jy" console.log( username.trim() ); ``` Output: ```text id="txju3f" Alice ``` It removes whitespace from both ends. --- # `trimStart()` ```javascript id="8kokhs" const value = ' Hello '; console.log( value.trimStart() ); ``` Result: ```text id="wqx06b" Hello ``` Only the beginning is trimmed. --- # `trimEnd()` ```javascript id="1xbfw5" console.log( value.trimEnd() ); ``` Result: ```text id="54xk8v" Hello ``` Only the end is trimmed. --- # Real-World Example: Cleaning Form Input 📝 ```javascript id="y917k8" const rawEmail = ' ALICE@EXAMPLE.COM '; const cleanEmail = rawEmail .trim() .toLowerCase(); console.log(cleanEmail); ``` Output: ```text id="15g8ag" alice@example.com ``` That's the kind of string processing you'll use constantly. --- # `slice()` — Extract Part of a String ✂️ Example: ```javascript id="a3ur4z" const language = 'JavaScript'; ``` Take the first four characters: ```javascript id="bbfznu" console.log( language.slice(0, 4) ); ``` Output: ```text id="0gw5s6" Java ``` Remember: ```text id="tckqjj" start included ✅ end excluded ❌ ``` --- # Slice From a Position ```javascript id="f51eyn" console.log( language.slice(4) ); ``` Output: ```text id="isnnv0" Script ``` --- # Negative Indexes With `slice()` ```javascript id="gf2585" console.log( language.slice(-6) ); ``` Output: ```text id="ggdayl" Script ``` Negative values count from the end. --- # `substring()` 📄 `substring()` also extracts part of a string. ```javascript id="vd81jt" const word = 'JavaScript'; console.log( word.substring(0, 4) ); ``` Output: ```text id="qf3ym2" Java ``` It looks similar to `slice()`. But there are differences. --- # `slice()` vs `substring()` 🤔 For modern code, `slice()` is often easier to reason about. Important difference: ```javascript id="vsohyu" word.slice(-6); ``` supports negative indexes. But `substring()` does not treat negative values the same way. Simple beginner rule: > Prefer `slice()` unless you specifically need `substring()` behavior. --- # `split()` — String → Array 📚 Suppose: ```javascript id="rfp3co" const names = 'Alice,Bob,Charlie'; ``` Use: ```javascript id="fxfl6e" const result = names.split(','); console.log(result); ``` Output: ```text id="vxd43q" [ 'Alice', 'Bob', 'Charlie' ] ``` `split()` breaks a string into pieces. --- # Split by Spaces ```javascript id="t9lzx9" const sentence = 'JavaScript is awesome'; console.log( sentence.split(' ') ); ``` Output: ```text id="9i1huq" [ 'JavaScript', 'is', 'awesome' ] ``` --- # Split Into Characters ```javascript id="b2dgq0" console.log( 'hello'.split('') ); ``` Output: ```text id="rf80e2" [ 'h', 'e', 'l', 'l', 'o' ] ``` For Unicode-sensitive character handling, remember that plain splitting has limitations with some Unicode sequences. --- # `split()` With a Limit ```javascript id="8ja5ul" const data = 'Alice,Bob,Charlie,Diana'; console.log( data.split(',', 2) ); ``` Output: ```text id="l6tdzm" [ 'Alice', 'Bob' ] ``` The second argument limits how many pieces are returned. --- # `join()` — Array → String 🔗 Remember from the Arrays chapter? ```javascript id="r3rtib" const words = [ 'JavaScript', 'is', 'awesome' ]; const sentence = words.join(' '); console.log(sentence); ``` Output: ```text id="olke9o" JavaScript is awesome ``` So: ```text id="t35u6f" split() → String → Array join() → Array → String ``` They work beautifully together. --- # Example: snake_case → camelCase 🔥 Suppose: ```javascript id="16atsm" const text = 'hello_world_from_javascript'; ``` We can write: ```javascript id="4mvha8" const camelCase = text .split('_') .map( (word, index) => index === 0 ? word : word[0].toUpperCase() + word.slice(1) ) .join(''); console.log(camelCase); ``` Output: ```text id="5cfh19" helloWorldFromJavascript ``` Several concepts working together: ```text id="byuau8" String ↓ split() ↓ Array ↓ map() ↓ join() ↓ String ``` That's real JavaScript composition. 🔥 --- # `replace()` — Replace Text 🔄 Example: ```javascript id="vn66k0" const message = 'I love JavaScript'; const updated = message.replace( 'JavaScript', 'React' ); console.log(updated); ``` Output: ```text id="md4gxz" I love React ``` The original remains unchanged. --- # Important: `replace()` Usually Replaces One String Match ```javascript id="t0vt14" const text = 'cat cat cat'; console.log( text.replace( 'cat', 'dog' ) ); ``` Output: ```text id="2qaxuk" dog cat cat ``` Only the first string match was replaced. --- # `replaceAll()` — Replace Everything 🔥 ```javascript id="ltjfnm" const text = 'cat cat cat'; console.log( text.replaceAll( 'cat', 'dog' ) ); ``` Output: ```text id="8u9prb" dog dog dog ``` Much clearer when you need every occurrence. --- # Replacement Can Be a Function 🧠 You can pass a callback as the replacement. Example: ```javascript id="6a9vis" const text = 'hello world'; const result = text.replace( 'hello', word => word.toUpperCase() ); console.log(result); ``` Output: ```text id="yqlx2k" HELLO world ``` When patterns get more advanced, regular expressions become useful. We’ll explore those properly in the dedicated RegEx chapter. --- # `repeat()` 🔁 Want to repeat text? ```javascript id="8xx3cq" console.log( 'ha'.repeat(3) ); ``` Output: ```text id="5e8yfs" hahaha ``` Another example: ```javascript id="muey2z" console.log( '-'.repeat(20) ); ``` Useful for simple formatting. --- # `padStart()` ⬅️ `padStart()` adds characters to the beginning until the string reaches a target length. ```javascript id="7ihs41" console.log( '5'.padStart(3, '0') ); ``` Output: ```text id="cs33hc" 005 ``` --- # Real Example: Time Formatting ⏰ ```javascript id="dbm166" const hour = '9'; console.log( hour.padStart(2, '0') ); ``` Output: ```text id="pf40us" 09 ``` Very useful for: ```text id="uwyx1c" 09:05:03 ``` instead of: ```text id="hrx58j" 9:5:3 ``` --- # `padEnd()` ➡️ Same idea, but padding goes at the end. ```javascript id="76tr4r" console.log( 'Hi'.padEnd( 6, '.' ) ); ``` Output: ```text id="4iuh6q" Hi.... ``` --- # Padding Doesn't Shorten Text ```javascript id="of2kdf" console.log( 'hello'.padStart( 3, '0' ) ); ``` Output: ```text id="gfdaq0" hello ``` The existing string is already longer than the target length, so nothing changes. --- # Practical Time Formatter ⏰ ```javascript id="3u0kox" function formatTime( hours, minutes, seconds ) { const h = String(hours) .padStart(2, '0'); const m = String(minutes) .padStart(2, '0'); const s = String(seconds) .padStart(2, '0'); return `${h}:${m}:${s}`; } ``` Use: ```javascript id="g5xv56" console.log( formatTime(9, 5, 3) ); ``` Output: ```text id="3qlfh2" 09:05:03 ``` --- # `normalize()` — Unicode Normalization 🌍 Some Unicode text can visually look identical while being represented differently internally. `normalize()` converts strings into a standard Unicode normalization form. Example: ```javascript id="m643k0" const normalized = text.normalize(); ``` For most everyday beginner JavaScript, you won't use this often. But it can matter when working with: * International text * Unicode comparisons * Search * Data normalization Just know it exists. --- # Regex-Based String Methods 🔍 Strings also have methods that work with **regular expressions**. These include: ```text id="cdg7uz" search() match() matchAll() ``` We’ll keep this section light because RegEx has its own dedicated chapter. --- # `search()` `search()` returns the index of the first regex match. Example: ```javascript id="svrchv" const text = 'Order number: 12345'; console.log( text.search(/\d/) ); ``` This finds where the first digit begins. If there's no match: ```text id="5lsvks" -1 ``` --- # `match()` `match()` returns information about matching content. Example: ```javascript id="sgijng" const text = 'Order 123, Order 456'; const matches = text.match(/\d+/g); console.log(matches); ``` Output: ```text id="kgmnrg" [ '123', '456' ] ``` --- # `matchAll()` `matchAll()` is useful when you want detailed information about **every match**. Example: ```javascript id="7cdt3h" const text = 'Error 404, Error 500'; const matches = text.matchAll( /Error (\d+)/g ); for ( const match of matches ) { console.log( match[1] ); } ``` Output: ```text id="wr345p" 404 500 ``` Again: > Don't worry if the regex syntax looks weird right now. We'll break regex down properly later. 😎 --- # Method Chaining 🔗 String methods become powerful when chained. Example: ```javascript id="i4xpjc" const input = ' JAVASCRIPT '; const cleaned = input .trim() .toLowerCase(); console.log(cleaned); ``` Output: ```text id="ybfm33" javascript ``` Read from top to bottom: ```text id="8ac6fh" Original value ↓ trim spaces ↓ lowercase ↓ result ``` --- # Real-World Example: Create a Slug 🔥 Suppose: ```javascript id="040mty" const title = ' Learn JavaScript Strings '; ``` We want: ```text id="d348ti" learn-javascript-strings ``` A simple version: ```javascript id="jfe2ai" const slug = title .trim() .toLowerCase() .split(' ') .filter(Boolean) .join('-'); console.log(slug); ``` Output: ```text id="4fhpvr" learn-javascript-strings ``` For production-grade slug generation, you'd usually handle punctuation, Unicode, and repeated whitespace more carefully. But this shows how string and array methods work together. --- # Real-World Example: Username Cleanup 👤 ```javascript id="5yvrzh" const input = ' AliceDeveloper '; const username = input .trim() .toLowerCase(); console.log(username); ``` Output: ```text id="h6g2wm" alicedeveloper ``` Simple. Useful. Common. --- # Real-World Example: File Validation 📁 ```javascript id="t2qw1j" const filename = 'profile.jpg'; if ( filename.endsWith('.jpg') ) { console.log( 'JPEG image ✅' ); } ``` You could extend this: ```javascript id="z6cmrw" const allowed = filename.endsWith('.jpg') || filename.endsWith('.png'); ``` --- # Real-World Example: Search 🔍 ```javascript id="9t4cfq" const title = 'Understanding JavaScript Closures'; const query = 'javascript'; const matches = title .toLowerCase() .includes( query.toLowerCase() ); console.log(matches); ``` Output: ```text id="fa04gn" true ``` This simple pattern powers many lightweight search interfaces. --- # Strings + Arrays Work Together 🤝 You'll constantly move between: ```text id="msjysa" String ↕ Array ``` Example: ```javascript id="7v6z21" const tags = 'javascript,react,node'; const array = tags.split(','); ``` Now: ```text id="qo7955" [ 'javascript', 'react', 'node' ] ``` Then: ```javascript id="etw5af" const result = array.join(' | '); ``` Output: ```text id="pt62ap" javascript | react | node ``` String and array methods are best friends. 😄 --- # Common String Methods Cheat Sheet 🧠 | Goal | Method | | -------------------------- | ------------------ | | Get length | `.length` | | Get character | `[index]`, `.at()` | | Find position | `indexOf()` | | Find last position | `lastIndexOf()` | | Check presence | `includes()` | | Check beginning | `startsWith()` | | Check ending | `endsWith()` | | Uppercase | `toUpperCase()` | | Lowercase | `toLowerCase()` | | Remove outer whitespace | `trim()` | | Trim beginning | `trimStart()` | | Trim end | `trimEnd()` | | Extract part | `slice()` | | Split into array | `split()` | | Replace first match | `replace()` | | Replace all string matches | `replaceAll()` | | Repeat | `repeat()` | | Pad beginning | `padStart()` | | Pad end | `padEnd()` | | Unicode normalization | `normalize()` | | Regex search | `search()` | | Regex matches | `match()` | | All detailed regex matches | `matchAll()` | Don't memorize the table. Know what you want to do... then choose the method. 🚀 --- # Important: Most String Methods Return New Strings 🔒 Because strings are immutable: ```javascript id="nnao2p" const name = 'alice'; name.toUpperCase(); console.log(name); ``` Output: ```text id="d9j6fm" alice ``` Why? Because you didn't store the returned value. Correct: ```javascript id="h0lhdn" const updated = name.toUpperCase(); console.log(updated); ``` Output: ```text id="q9v575" ALICE ``` Or: ```javascript id="vt280r" let name = 'alice'; name = name.toUpperCase(); ``` Now the variable points to the new string. --- # Common String Mistakes 🚨 ## 1️⃣ Forgetting Strings Are Immutable This doesn't change the string: ```javascript id="a5n8xa" name.toUpperCase(); ``` Store the result: ```javascript id="c3gb27" name = name.toUpperCase(); ``` --- ## 2️⃣ Forgetting Searches Are Case-Sensitive ```javascript id="u7qpye" 'JavaScript' .includes( 'javascript' ); ``` returns: ```text id="19tjql" false ``` Normalize case first when needed. --- ## 3️⃣ Confusing `slice()` End Position ```javascript id="tpmkhq" 'JavaScript'.slice( 0, 4 ); ``` gives: ```text id="6ik4ff" Java ``` Index `4` isn't included. --- ## 4️⃣ Expecting `replace()` to Replace Every Match ```javascript id="onq13a" 'cat cat' .replace( 'cat', 'dog' ); ``` Result: ```text id="y7rnns" dog cat ``` Use: ```javascript id="9yr4h2" replaceAll() ``` when appropriate. --- ## 5️⃣ Thinking `.length` Always Counts Visible Characters For some Unicode characters: ```javascript id="q8af8u" '😀'.length; ``` returns: ```text id="j5hufc" 2 ``` Unicode text can be more complex than it appears visually. --- ## 6️⃣ Using `split('')` for Every Unicode Scenario For simple ASCII-style text: ```javascript id="k2wto4" 'hello'.split(''); ``` is fine. But complex Unicode characters and grapheme clusters may need more careful handling. Don't assume one visual character always equals one JavaScript string unit. --- # 🧪 Mini Challenge 1 Predict: ```javascript id="a99wkw" const name = ' Alice '; console.log( name.trim().length ); ``` ### Answer ```text id="qfvs0j" 5 ``` Because: ```text id="mhbdmq" ' Alice ' ↓ trim() ↓ 'Alice' ``` --- # 🧪 Mini Challenge 2 What gets printed? ```javascript id="66njf6" const language = 'JavaScript'; console.log( language.slice(4) ); ``` ### Answer ```text id="zlhjfv" Script ``` --- # 🧪 Mini Challenge 3 Predict: ```javascript id="a8qnj6" const text = 'Hello World'; console.log( text .toLowerCase() .includes('world') ); ``` ### Answer ```text id="w2yxsn" true ``` --- # 🧪 Mini Challenge 4 What happens here? ```javascript id="07wu8o" const tags = 'javascript,react,node'; console.log( tags.split(',') ); ``` ### Answer ```text id="9kmf9o" [ 'javascript', 'react', 'node' ] ``` --- # 🧪 Mini Challenge 5 Predict: ```javascript id="rw999w" const word = 'JavaScript'; console.log( word.at(-1) ); ``` ### Answer ```text id="7q0b5c" t ``` Negative `.at()` indexes count from the end. --- # 🧠 Quick Recap Strings represent text: ```javascript id="1hv4ls" const message = 'Hello JavaScript'; ``` They are: ```text id="st7712" Primitive Immutable ``` --- ### Create ```javascript id="kmv2ki" 'hello' "hello" `hello` ``` --- ### Template Literals ```javascript id="5nd0su" `Hello ${name}` ``` --- ### Search ```text id="6b44rs" includes() indexOf() lastIndexOf() startsWith() endsWith() ``` --- ### Transform ```text id="e3g1m0" toUpperCase() toLowerCase() trim() trimStart() trimEnd() replace() replaceAll() repeat() padStart() padEnd() normalize() ``` --- ### Extract ```text id="drat1e" slice() substring() split() ``` --- ### Character Access ```text id="xmv40p" str[index] at() charAt() ``` --- ### Regex-Related ```text id="enxg5b" search() match() matchAll() ``` And remember: > **Strings don't change themselves. String operations normally produce new values.** --- # 🚀 What's Next? You've now learned how JavaScript works with: ```text id="hkgx85" Arrays 📚 Objects 🗂️ Sets 🎯 Maps 🗺️ Strings 📝 ``` But code doesn't always behave perfectly. APIs fail. JSON can be invalid. Users enter unexpected data. Operations can throw errors. 💥 Good applications need to handle those failures gracefully. That's exactly what comes next: # Error Handling: `try`, `catch`, `finally` 🚨 You'll learn how JavaScript can: ```text id="3mcohj" Detect errors Catch failures Recover gracefully Throw custom errors Avoid crashing application flows ``` --- # Keep Learning With asif.to 🚀 Don't memorize every string method. Instead ask: ```text id="p3n806" Am I searching? Cleaning? Extracting? Replacing? Splitting? Formatting? Checking a prefix or suffix? ``` Once you know the goal, choosing the method becomes much easier. At **asif.to**, the goal is: > **Understand → Practice → Build → Repeat. 🔁** 🌐 **asif.to** Follow **asif.to** on social media for: * ⚡ Quick JavaScript tips * 🧠 Beginner-friendly explanations * ⚛️ [React](/courses/reactjs) & [Next.js](/courses/nextjs) learning * 💻 Practical coding tutorials * 🎯 Interview preparation * 🚀 New developer resources **One concept at a time. One level higher every day. 🚀** ### See you in the Error Handling chapter 👋 ```javascript // Creating Strings & Template Literals // ─── String Creation ───────────────────────────────────── const single = 'Hello, World!'; const double = "Hello, World!"; const backtick = `Hello, World!`; // ─── Template Literals ──────────────────────────────────── const name = 'Alice'; const age = 30; const city = 'London'; // Interpolation const bio = `My name is ${name}, I am ${age} years old.`; console.log(bio); // 'My name is Alice, I am 30 years old.' // Expressions inside ${} console.log(`Next year I'll be ${age + 1}`); console.log(`Is adult: ${age >= 18 ? 'Yes' : 'No'}`); console.log(`PI = ${Math.PI.toFixed(2)}`); // Multi-line strings const html = `

${name}

Age: ${age}

City: ${city}

`.trim(); console.log(html); // Nested template literals const items = ['Apple', 'Banana', 'Cherry']; const list = `Items: ${items.map(i => `

${i}

`).join('')}`; // ─── String Properties ──────────────────────────────────── console.log('hello'.length); // 5 console.log('😀'.length); // 2 (emoji = 2 UTF-16 code units) console.log([...'😀'].length); // 1 (spread works with full Unicode) // ─── Character Access ───────────────────────────────────── const str = 'JavaScript'; console.log(str[0]); // 'J' console.log(str.at(-1)); // 't' (last char — negative indexing) console.log(str.at(-3)); // 'i' (3rd from end) console.log(str.charAt(4)); // 'S' console.log(str.charCodeAt(0)); // 74 (Unicode code point of 'J') console.log(String.fromCharCode(74)); // 'J' ``` ```javascript // Searching & Testing Methods const text = 'The quick brown fox jumps over the lazy dog'; // ─── indexOf & lastIndexOf ─────────────────────────────── console.log(text.indexOf('fox')); // 16 console.log(text.indexOf('cat')); // -1 (not found) console.log(text.indexOf('the')); // 31 (case sensitive!) console.log(text.lastIndexOf('the')); // 31 console.log(text.indexOf('o', 17)); // 17 (search from index 17) // ─── includes, startsWith, endsWith ───────────────────── console.log(text.includes('fox')); // true console.log(text.includes('Fox')); // false (case sensitive) console.log(text.startsWith('The')); // true console.log(text.startsWith('quick', 4)); // true (starts at index 4) console.log(text.endsWith('dog')); // true console.log(text.endsWith('dog.')); // false console.log(text.endsWith('fox', 19)); // true (treat as if string ends at 19) // ─── search() with regex ───────────────────────────────── console.log(text.search(/fox/)); // 16 (first match index) console.log(text.search(/d+/)); // -1 (no digits) console.log(text.search(/[aeiou]/i)); // 2 (first vowel) // ─── match() — returns array of matches ────────────────── const email = 'Contact alice@email.com or bob@email.org for help'; // Without 'g' flag — returns first match with details const firstMatch = email.match(/w+@w+.w+/); console.log(firstMatch[0]); // 'alice@email.com' console.log(firstMatch.index); // 8 // With 'g' flag — returns all matches const allEmails = email.match(/w+@w+.w+/g); console.log(allEmails); // ['alice@email.com', 'bob@email.org'] // ─── matchAll() (ES2020) — full match info for all ─────── const logText = 'Error 404 on page /home, Error 500 on page /api'; const errorPattern = /Error (d+) on page (S+)/g; const allErrors = [...logText.matchAll(errorPattern)]; for (const match of allErrors) { console.log(`Code: ${match[1]}, Page: ${match[2]}`); } // Code: 404, Page: /home // Code: 500, Page: /api ``` ```javascript // Transformation & Extraction Methods // ─── Case Conversion ───────────────────────────────────── console.log('Hello World'.toUpperCase()); // 'HELLO WORLD' console.log('Hello World'.toLowerCase()); // 'hello world' // Capitalize first letter const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase(); console.log(capitalize('hELLO')); // 'Hello' // ─── Trim methods ──────────────────────────────────────── const padded = ' Hello World '; console.log(padded.trim()); // 'Hello World' console.log(padded.trimStart()); // 'Hello World ' console.log(padded.trimEnd()); // ' Hello World' // ─── padStart & padEnd ─────────────────────────────────── // Pad to reach a target length console.log('5'.padStart(3, '0')); // '005' — zero-pad numbers console.log('hi'.padEnd(10, '.')); // 'hi........' console.log('42'.padStart(5, ' ')); // ' 42' — right-align console.log('hello'.padEnd(3)); // 'hello' — no-op if already longer // Practical: format time display const formatTime = (h, m, s) => `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`; console.log(formatTime(9, 5, 3)); // '09:05:03' // ─── repeat() ──────────────────────────────────────────── console.log('ha'.repeat(3)); // 'hahaha' console.log('-'.repeat(20)); // '--------------------' console.log('abc'.repeat(0)); // '' (empty) // ─── replace() & replaceAll() ──────────────────────────── const sentence = 'I love cats. Cats are wonderful. My cat is named Whiskers.'; // replace() — only replaces first occurrence (without /g) console.log(sentence.replace('cat', 'dog')); // replaces first 'cat' console.log(sentence.replace(/cat/g, 'dog')); // replaces all // replaceAll() — replaces all (ES2021) console.log(sentence.replaceAll('cat', 'dog')); // all 'cat' -> 'dog' // Using a function as replacement const result = 'hello world'.replace(/w/g, char => char.toUpperCase()); console.log(result); // 'Hello World' // ─── slice() ───────────────────────────────────────────── const lang = 'JavaScript'; console.log(lang.slice(0, 4)); // 'Java' console.log(lang.slice(4)); // 'Script' console.log(lang.slice(-6)); // 'Script' (from 6th from end) console.log(lang.slice(0, -6)); // 'Java' // ─── split() ───────────────────────────────────────────── const csv = 'Alice,Bob,Charlie,Diana,Eve'; console.log(csv.split(',')); // ['Alice','Bob','Charlie','Diana','Eve'] console.log(csv.split(',', 3)); // ['Alice','Bob','Charlie'] — limit const sentence2 = 'The quick brown fox'; console.log(sentence2.split(' ')); // ['The','quick','brown','fox'] console.log(sentence2.split('')); // ['T','h','e',' ','q',...] each char console.log('hello'.split('')); // ['h','e','l','l','o'] // split then join — replace all const snakeCase = 'hello_world_foo_bar'; const camelCase = snakeCase.split('_').map((w, i) => i === 0 ? w : w[0].toUpperCase() + w.slice(1) ).join(''); console.log(camelCase); // 'helloWorldFooBar' ```