{"id":99,"date":"2024-11-08T02:59:34","date_gmt":"2024-11-08T02:59:34","guid":{"rendered":"https:\/\/techkubo.com\/javascript\/?p=99"},"modified":"2025-05-13T11:43:04","modified_gmt":"2025-05-13T11:43:04","slug":"javascript-strings","status":"publish","type":"post","link":"https:\/\/techkubo.com\/javascript\/javascript-strings\/","title":{"rendered":"JavaScript Strings"},"content":{"rendered":"\n

What is a String?<\/strong><\/h2>\n\n\n\n

A string is a sequence of characters used to represent text. In JavaScript, strings are enclosed in single quotes ('<\/code>), double quotes (\"<\/code>), or backticks (`<\/code>).<\/p>\n\n\n\n

\/\/ Example of Strings:\n\nlet singleQuote = 'Hello';\nlet doubleQuote = "World";\nlet templateLiteral = `Hello, World!`;\nconsole.log(singleQuote);  \/\/ Output: Hello\nconsole.log(doubleQuote);  \/\/ Output: World\nconsole.log(templateLiteral);  \/\/ Output: Hello, World!<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
String Properties<\/strong><\/h2>\n\n\n\n
Strings have properties that provide information about the string.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Length<\/strong><\/h2>\n\n\n\n
The length<\/code> property returns the number of characters in a string.<\/p>\n\n\n\n
let text = "JavaScript";\nconsole.log(text.length);  \/\/ Output: 10<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
String Methods<\/strong><\/h2>\n\n\n\n
JavaScript provides various methods to manipulate strings.<\/p>\n\n\n\n
1. charAt()<\/strong><\/p>\n\n\n\n
The charAt()<\/code> method returns the character at a specified index.<\/p>\n\n\n\n
let text = "JavaScript";\nconsole.log(text.charAt(0));  \/\/ Output: J\nconsole.log(text.charAt(4));  \/\/ Output: S<\/pre><\/div>\n\n\n\n
2. concat()<\/strong><\/p>\n\n\n\n
The concat()<\/code> method concatenates two or more strings.<\/p>\n\n\n\n
let text1 = "Hello";\nlet text2 = "World";\nlet result = text1.concat(", ", text2, "!");\nconsole.log(result);  \/\/ Output: Hello, World!<\/pre><\/div>\n\n\n\n
3. includes()<\/strong><\/p>\n\n\n\n
The includes()<\/code> method checks if a string contains a specified substring.<\/p>\n\n\n\n
let text = "JavaScript is fun";\nconsole.log(text.includes("fun"));  \/\/ Output: true\nconsole.log(text.includes("boring"));  \/\/ Output: false<\/pre><\/div>\n\n\n\n
4. indexOf()<\/strong><\/p>\n\n\n\n
The indexOf()<\/code> method returns the index of the first occurrence of a specified substring.<\/p>\n\n\n\n
let text = "JavaScript";\nconsole.log(text.indexOf("S"));  \/\/ Output: 4\nconsole.log(text.indexOf("X"));  \/\/ Output: -1<\/pre><\/div>\n\n\n\n
5. replace()<\/strong><\/p>\n\n\n\n
The replace()<\/code> method replaces a specified substring with another substring.<\/p>\n\n\n\n
let text = "JavaScript is fun";\nlet newText = text.replace("fun", "awesome");\nconsole.log(newText);  \/\/ Output: JavaScript is awesome<\/pre><\/div>\n\n\n\n
6. slice()<\/strong><\/p>\n\n\n\n
The slice()<\/code> method extracts a part of a string and returns it as a new string.<\/p>\n\n\n\n
let text = "JavaScript";\nlet part = text.slice(0, 4);\nconsole.log(part);  \/\/ Output: Java<\/pre><\/div>\n\n\n\n
7. split()<\/strong><\/p>\n\n\n\n
The split()<\/code> method splits a string into an array of substrings.<\/p>\n\n\n\n
let text = "Hello, World!";\nlet words = text.split(" ");\nconsole.log(words);  \/\/ Output: ["Hello,", "World!"]<\/pre><\/div>\n\n\n\n
8. substring()<\/strong><\/p>\n\n\n\n
The substring()<\/code> method extracts characters from a string between two specified indices.<\/p>\n\n\n\n
let text = "JavaScript";\nlet part = text.substring(4, 10);\nconsole.log(part);  \/\/ Output: Script<\/pre><\/div>\n\n\n\n
9. toLowerCase()<\/code> and toUpperCase()<\/code><\/strong><\/p>\n\n\n\n
The toLowerCase()<\/code> method converts a string to lowercase, and the toUpperCase()<\/code> method converts a string to uppercase.<\/p>\n\n\n\n
let text = "JavaScript";\nconsole.log(text.toLowerCase());  \/\/ Output: javascript\nconsole.log(text.toUpperCase());  \/\/ Output: JAVASCRIPT<\/pre><\/div>\n\n\n\n
10. trim()<\/strong><\/p>\n\n\n\n
The trim()<\/code> method removes whitespace from both ends of a string.<\/p>\n\n\n\n
let text = "   JavaScript   ";\nconsole.log(text.trim());  \/\/ Output: JavaScript<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
JavaScript Strings Example Code<\/strong><\/h2>\n\n\n\n
Explanation of Code: <\/strong><\/p>\n\n\n\n
    \n
  • String Properties<\/strong>: Demonstrates the use of the length<\/code> property.<\/li>\n\n\n\n
  • String Methods<\/strong>: Demonstrates the use of various string methods such as charAt<\/code>, concat<\/code>, includes<\/code>, indexOf<\/code>, replace<\/code>, slice<\/code>, split<\/code>, substring<\/code>, toLowerCase<\/code>, toUpperCase<\/code>, and trim<\/code>.<\/li>\n<\/ul>\n\n\n\n
    <!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>JavaScript Strings Example<\/title>\n<\/head>\n<body>\n    <script>\n        let text = "  JavaScript is fun!  ";\n\n        \/\/ String properties\n        console.log("Length: " + text.length);  \/\/ Output: Length: 20\n\n        \/\/ String methods\n        console.log("charAt(0): " + text.charAt(0));  \/\/ Output: charAt(0):  \n        console.log("concat(): " + text.concat(" Let's learn it."));  \/\/ Output: concat():   JavaScript is fun!  Let's learn it.\n        console.log("includes('fun'): " + text.includes("fun"));  \/\/ Output: includes('fun'): true\n        console.log("indexOf('S'): " + text.indexOf("S"));  \/\/ Output: indexOf('S'): 5\n        console.log("replace('fun', 'awesome'): " + text.replace("fun", "awesome"));  \/\/ Output: replace('fun', 'awesome'):   JavaScript is awesome!  \n        console.log("slice(2, 12): " + text.slice(2, 12));  \/\/ Output: slice(2, 12): JavaScript\n        console.log("split(' '): " + text.split(" "));  \/\/ Output: split(' '): ,JavaScript,is,fun!,,\n        console.log("substring(2, 12): " + text.substring(2, 12));  \/\/ Output: substring(2, 12): JavaScript\n        console.log("toLowerCase(): " + text.toLowerCase());  \/\/ Output: toLowerCase():   javascript is fun!  \n        console.log("toUpperCase(): " + text.toUpperCase());  \/\/ Output: toUpperCase():   JAVASCRIPT IS FUN!  \n        console.log("trim(): " + text.trim());  \/\/ Output: trim(): JavaScript is fun!\n    <\/script>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    <\/p>\n\n\n\n
    JavaScript Labs<\/strong><\/h2>\n\n\n\n