dde272c4b8
i18n - Build Validation / Validate i18n Builds (24) (push) Has been cancelled
CI - Node.js / Lint (24) (push) Has been cancelled
CI - Node.js / Build (24) (push) Has been cancelled
CI - Node.js / Test (24) (push) Has been cancelled
CI - Node.js / Test - Upcoming Changes (24) (push) Has been cancelled
CI - Node.js / Test - i18n (italian, 24) (push) Has been cancelled
CI - Node.js / Test - i18n (portuguese, 24) (push) Has been cancelled
CD - Docker - GHCR Images / Build and Push Images (push) Has been cancelled
6.7 KiB
6.7 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 6723c1946e4cd7909a836bb4 | JavaScript Strings Review | 31 | review-javascript-strings |
--interactive--
String Basics
- Definition: A string is a sequence of characters wrapped in either single quotes, double quotes or backticks. Strings are primitive data types and they are immutable. Immutability means that once a string is created, it cannot be changed.
- Accessing Characters from a String: To access a character from a string you can use bracket notation and pass in the index number. An index is the position of a character within a string, and it is zero-based.
:::interactive_editor
const developer = "Jessica";
console.log(developer[0]); // J
:::
\n(Newline Character): You can create a newline in a string by using the\nnewline character.
:::interactive_editor
const poem = "Roses are red,\nViolets are blue,\nJavaScript is fun,\nAnd so are you.";
console.log(poem);
:::
- Escaping Strings: You can escape characters in a string by placing backslashes (
\) in front of the quotes.
:::interactive_editor
const statement = "She said, \"Hello!\"";
console.log(statement); // She said, "Hello!"
:::
Template Literals (Template Strings) and String Interpolation
- Definition: Template literals are defined with backticks (`). They allow for easier string manipulation, including embedding variables directly inside a string, a feature known as string interpolation.
:::interactive_editor
const name = "Jessica";
const greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, Jessica!"
:::
ASCII, the charCodeAt() Method and the fromCharCode() Method
- ASCII: ASCII (American Standard Code for Information Interchange) is a character encoding standard used to represent basic English characters using numeric values. Earlier lessons introduce
charCodeAt()andfromCharCode()using ASCII examples. - Unicode: JavaScript strings use Unicode internally, specifically UTF-16 encoding. For the first 128 characters (basic Latin letters, digits, and common symbols), the Unicode values match ASCII codes. This is why ASCII-based examples continue to work in JavaScript.
- The
charCodeAt()Method: This method returns the UTF-16 code unit of the character at a specified index. For basic Latin characters, this value matches the ASCII code.
:::interactive_editor
const letter = "A";
console.log(letter.charCodeAt(0)); // 65
:::
- The
fromCharCode()Method: This method converts an ASCII code into its corresponding character.
:::interactive_editor
const char = String.fromCharCode(65);
console.log(char); // A
:::
Other Common String Methods
- The
indexOfMethod: This method is used to search for a substring within a string. If the substring is found,indexOfreturns the index (or position) of the first occurrence of that substring. If the substring is not found,indexOfreturns -1, which indicates that the search was unsuccessful.
:::interactive_editor
const text = "The quick brown fox jumps over the lazy dog.";
console.log(text.indexOf("fox")); // 16
console.log(text.indexOf("cat")); // -1
:::
- The
includes()Method: This method is used to check if a string contains a specific substring. If the substring is found within the string, the method returns true. Otherwise, it returns false.
:::interactive_editor
const text = "The quick brown fox jumps over the lazy dog.";
console.log(text.includes("fox")); // true
console.log(text.includes("cat")); // false
:::
- The
slice()Method: This method extracts a portion of a string and returns a new string, without modifying the original string. It takes two parameters: the starting index and the optional ending index.
:::interactive_editor
const text = "freeCodeCamp";
console.log(text.slice(0, 4)); // "free"
console.log(text.slice(4, 8)); // "Code"
console.log(text.slice(8, 12)); // "Camp"
:::
- The
toUpperCase()Method: This method converts all the characters to uppercase letters and returns a new string with all uppercase characters.
:::interactive_editor
const text = "Hello, world!";
console.log(text.toUpperCase()); // "HELLO, WORLD!"
:::
- The
toLowerCase()Method: This method converts all characters in a string to lowercase.
:::interactive_editor
const text = "HELLO, WORLD!"
console.log(text.toLowerCase()); // "hello, world!"
:::
- The
replace()Method: This method allows you to find a specified value (like a word or character) in a string and replace it with another value. The method returns a new string with the replacement and leaves the original unchanged because JavaScript strings are immutable.
:::interactive_editor
const text = "I like cats";
console.log(text.replace("cats", "dogs")); // "I like dogs"
:::
- The
replaceAll()Method: This method allows you to find all occurrences of a specified value (a word, character, or pattern) in a string and replace them with another value. It works likereplace(), but instead of stopping after the first match, it updates every match found in the string.
:::interactive_editor
const text = "I love cats and cats are so much fun!";
console.log(text.replaceAll("cats", "dogs")); // "I love dogs and dogs are so much fun!"
:::
- The
repeat()Method: This method is used to repeat a string a specified number of times.
:::interactive_editor
const text = "Hello";
console.log(text.repeat(3)); // "HelloHelloHello"
:::
- The
trim()Method: This method is used to remove whitespaces from both the beginning and the end of a string.
:::interactive_editor
const text = " Hello, world! ";
console.log(text.trim()); // "Hello, world!"
:::
- The
trimStart()Method: This method removes whitespaces from the beginning (or "start") of the string.
:::interactive_editor
const text = " Hello, world! ";
console.log(text.trimStart()); // "Hello, world! "
:::
- The
trimEnd()Method: This method removes whitespaces from the end of the string.
:::interactive_editor
const text = " Hello, world! ";
console.log(text.trimEnd()); // " Hello, world!"
:::
- The
prompt()Method: This method of thewindowis used to get information from a user through the form of a dialog box. This method takes two arguments. The first argument is the message which will appear inside the dialog box, typically prompting the user to enter information. The second one is a default value which is optional and will fill the input field initially.
const answer = window.prompt("What's your favorite animal?"); // This will change depending on what the user answers
--assignment--
Review the JavaScript Strings topics and concepts.