A string is a sequence of characters. That is not quite true for Unicode. An Unicode string is a sequence of “code points”. JavaScript support Unicode symbols in string literals.
String literals
String literals are surrounded by single quotes: ‘…’ or double quotes “…”. You can use quotes inside a string, as long as they don’t match the quotes surrounding the string, otherwise you must use escape symbol “\” in front of quotes matching the surrounding quotes.
Example:
1 2 3 4 5 6 7 8 9 10 11 | // Single quote inside double quotes answer = "It's alright"; // Single quotes inside double quotes answer = "He is called 'Johnny'"; // Double quotes inside single quotes answer = 'He is called "Johnny"'; // Escape for single quote answer = 'It\'s sister is famous!'; |
Join two strings:
The process of joining two strings is also called concatenation. We create a new string using concatenate operator “+”. Below is an example of concatenating two string variables.
1 2 3 4 5 6 7 | //create two string variables numberOfProducts = "five" productType = "potato" //create a third variable and assign to it a value //by concatenating the two string variables we created earlier inventory = numberOfProducts + productType |
Template literals
Templates are special string literals enclosed in back-quotes `…` There is a useful method for string manipulation called: “string interpolation”. For this string template can use placeholders like: ${var}. A placeholder will be replace automatically by values.
Example:
1 2 3 4 5 6 7 | //define object let car = {type:"Fiat", model:"500", color:"white"} //read object properties console.log(`car type = ${car['type']}`) console.log(`car model = ${car.model}`) console.log(`car color = ${car.color}`) |
Notes:
- String templates can include single quotes or double quotes
- Back-quotes must be escaped with “\” inside a template
- String interpolation can accept numeric variables
- String interpolation can accept expressions
Example:
1 2 3 4 | let a = 5; let b = 10; console.log(`${a} + ${b} = ${a + b}`); console.log(`2 * (${a} + ${b}) = ${2 * a + b}`); |
Output:
2 * (5 + 10) = 20
Split a string:
A string is an object so it has methods. String methods can be call using the dot notation. For example if str=”Hello World” is a sting then you can use method: split like this: str.split(” “) and this will create an array of 2 words: [“Hello”,”World”]. The string was split in two parts and space (the separator) is discarded.
1 2 3 4 5 6 7 8 | // define a string let str = "hello world" // use method split() let arr = str.split(" ") // display the result console.log(arr); // ["hello", "world"] |
Extract a character:
There are 2 safe methods for extracting string characters:
- charAt(position)
- charCodeAt(position)
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // define a string let str = "Hello World" // safe access w = str.charAt(6); console.log(w); // W // unsafe access h = str[0] console.log(h); // H // safe access to code c = str.charCodeAt(0); console.log(c); //72 |
Note: Do not use a string like an array with index: str[0]. This is not safe, except if your string is using ASCII characters or printable Unicode symbols and no modifiers. If this is not true accessing a string character by index is a bad practice.
String methods
The string object has numerous predefined methods that are not in my scope to present. If you need a method you should consult the MDN reference documentation. To search this documentation type in google search box: MDN <function_name> for example: “mdn charAt()”, most of the time first hit will lead you to details about correct function.
| Method | Description |
| charAt() | Returns the character at the specified index (position) |
| charCodeAt() | Returns the Unicode of the character at the specified index |
| concat() | Joins two or more strings, and returns a new joined strings |
| endsWith() | Checks whether a string ends with specified string/characters |
| fromCharCode() | Converts Unicode values to characters |
| includes() | Checks whether a string contains the specified string/characters |
| indexOf() | Returns the position of the first found occurrence of a specified value in a string |
| lastIndexOf() | Returns the position of the last found occurrence of a specified value in a string |
| localeCompare() | Compares two strings in the current locale |
| match() | Searches a string for a match against a regular expression, and returns the matches |
| repeat() | Returns a new string with a specified number of copies of an existing string |
| replace() | Searches a string for a specified value, or a regular expression, and returns a new string where the specified values are replaced |
| search() | Searches a string for a specified value, or regular expression, and returns the position of the match |
| slice() | Extracts a part of a string and returns a new string |
| split() | Splits a string into an array of substrings |
| startsWith() | Checks whether a string begins with specified characters |
| substr() | Extracts the characters from a string, beginning at a specified start position, and through the specified number of character |
| substring() | Extracts the characters from a string, between two specified indices |
| toLocaleLowerCase() | Converts a string to lowercase letters, according to the host’s locale |
| toLocaleUpperCase() | Converts a string to uppercase letters, according to the host’s locale |
| toLowerCase() | Converts a string to lowercase letters |
| toString() | Returns the value of a String object |
| toUpperCase() | Converts a string to uppercase letters |
| trim() | Removes white-space from both ends of a string |
reference manual: MDN: String Methods
Next article: about <script>