In JavaScript, you can use bracket notation to access the nth character in a string. The bracket notation consists of the string variable name followed by square brackets containing the index number of the character you want to access. The index of the first character in a string is 0, the second character has an index of 1, and so on. Here’s an example:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let myString = "Hello, world!"; let fifthCharacter = myString[4]; console.log(fifthCharacter); // Output: "o"
[/dm_code_snippet]
In this example, the variable myString
is assigned the string “Hello, world!”. To access the fifth character, we use the square brackets to specify the index of the character we want to access (4). The fifth character in the string is “o”, so the variable fifthCharacter
is assigned the value “o”. When we print fifthCharacter
to the console using the console.log
function, it outputs “o”.
You can also use variable as index value to access the nth characters from the string,
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let n = 5; let fifthCharacter = myString[n-1]; console.log(fifthCharacter); // Output: "o"
[/dm_code_snippet]
Be aware that attempting to access a non-existent character in the string will return undefined
. For example,
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let lastChar = myString[myString.length]; console.log(lastChar); // Output: undefined
[/dm_code_snippet]
because index are 0-based, so last character index is always length-1.
In addition, you can also use negative numbers as index to access the characters counting from the end of the string
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let lastChar = myString[-1]; console.log(lastChar); // Output: "!"
[/dm_code_snippet]
You can also use bracket notation to change the value of a specific character in a string. Here’s an example:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let myString = "Hello, world!"; myString[7] = "J"; console.log(myString); // Output: "Hello, Jorld!"
[/dm_code_snippet]
In this example, we use the bracket notation to change the 8th character of the string myString
from “w” to “J”. This changes the string from “Hello, world!” to “Hello, Jorld!”.
Keep in mind that JavaScript strings are immutable, meaning that their value cannot be modified directly. When you use bracket notation to change the value of a character in a string, you are actually creating a new string with the modified value.
You can also use bracket notation to access a range of characters in a string, also called substring. The way to do it is by using the bracket notation along with the slice()
method.
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let myString = "Hello, world!"; let subString = myString.slice(7, 12); console.log(subString); // Output: "world"
[/dm_code_snippet]
The slice()
method takes two arguments: the starting index and the ending index of the substring. The substring includes the characters from the starting index up to but not including the ending index. In this example, the substring includes the characters from index 7 (“w”) up to index 12 (“!”), so the output is “world”.
You can also use negative numbers as arguments in the slice()
method to count the indices from the end of the string, like this:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let subString = myString.slice(-6, -1); console.log(subString); // Output: "world"
[/dm_code_snippet]
Another way to extract a substring from a string is by using the substring()
method, which works in a similar way as the slice()
method. The only difference is that the substring()
method doesn’t accept negative numbers as arguments.
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let myString = "Hello, world!"; let subString = myString.substring(7, 12); console.log(subString); // Output: "world"
[/dm_code_snippet]
You can also use substr()
method, which takes two arguments : starting index, and the number of characters from that point.
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let subString = myString.substr(7, 5); console.log(subString); // Output: "world"
[/dm_code_snippet]
Finally, you can use the split()
method to split a string into an array of substrings. The split()
method takes an optional separator as an argument, which can be a string or a regular expression. By default, the split()
method splits a string into an array of substrings by white spaces.
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let myString = "Hello, world!"; let words = myString.split(" "); console.log(words); // Output: ["Hello,", "world!"]
[/dm_code_snippet]
In this example, the split()
method is used to split the string myString
into an array of substrings by space. The result is an array of two strings: “Hello,” and “world!”
These are some of the ways you can use bracket notation to access and manipulate the characters in a string in JavaScript. With the knowledge of these methods you should be able to work with any kind of string manipulation scenarios.