String Manipulation in JS
JavaScript also provides various methods for manipulating strings, such as concatenation, slicing, and replacing.
let str1 = 'Hello';
let str2 = 'World';
console.log(str1 + ' ' + str2); // Output: 'Hello World'
let myString = 'Hello, World!';
console.log(myString.slice(0, 5)); // Output: 'Hello' (returns characters 0-4)
console.log(myString.replace('World', 'Mars')); // Output: 'Hello, Mars!' (replaces 'World' with 'Mars')
console.log(myString.toUpperCase()); // Output: 'HELLO, WORLD!' (converts all characters to uppercase)
String Methods
JavaScript provides many built-in methods for manipulating strings, such as charAt(), indexOf(), and split().
let myString = 'Hello, World!';
console.log(myString.charAt(0)); // Output: 'H' (returns the character at index 0)
console.log(myString.indexOf('World')); // Output: 7 (returns the starting index of 'World')
console.log(myString.split(',')); // Output: ['Hello', ' World!'] (splits the string into an array at each comma)
console.log(myString.trim()); // Output: 'Hello, World!' (removes whitespace from both ends of the string)
String Functions
JavaScript also provides functions for encoding and decoding strings, such as encodeURI(), decodeURI(), encodeURIComponent(), and decodeURIComponent().
let myString = "Hello, World!";
console.log(encodeURI(myString)); // Output: "Hello,%20World!" (encodes the string for use in a URI)
console.log(decodeURI("Hello,%20World!")); // Output: "Hello, World!" (decodes a URI-encoded string)
console.log(encodeURIComponent(myString)); // Output: "Hello%2C%20World%21" (encodes the string for use in a URI component)
console.log(decodeURIComponent("Hello%2C%20World%21")); // Output: "Hello, World!" (decodes a URI-encoded component)
Concepts using in Web Desinging
Web designers may use string manipulation to format and display text on a webpage, or to manipulate URLs or other data. For example, the toUpperCase() and toLowerCase() methods can be used to standardize the case of text, while the replace() method can be used to find and replace text or URLs.
// Example 1: Capitalize the first letter of each word in a title
let title = "my website title";
title = title.toLowerCase().replace(/(^|\s)\S/g, (letter) => letter.toUpperCase());
document.title = title;
// Example 2: Remove the query string from a URL
let url = "https://www.example.com/page.html?param1=value1¶m2=value2";
url = url.split("?")[0];
console.log(url); // Output: "https://www.example.com/page.html"
String.slice() and String.split()
The String.slice() and String.split() methods are useful for extracting parts of a string or splitting a string into an array of substrings. These methods can be used for formatting text or manipulating URLs.
// Example 1: Format a date string
let date = "2022-03-05";
date = date.slice(8, 10) + "/" + date.slice(5, 7) + "/" + date.slice(0, 4);
console.log(date); // Output: "05/03/2022"
// Example 2: Split a URL into its components
let url = "https://www.example.com/page.html?param1=value1¶m2=value2";
let protocol = url.split(":")[0]; // "https"
let domain = url.split("/")[2]; // "www.example.com"
let path = url.split("?")[0].split("/").slice(3).join("/"); // "page.html"
console.log(protocol, domain, path); // Output: "https", "www.example.com", "page.html"
