HomeSearch

JavaScript charAt: Get Char From String

Get characters from a string with the charAt method and the string indexer. Use charCodeAt.

CharAt.

A JavaScript string may contain many characters. We can iterate over these characters with a for-loop, and then index the characters or use charAt.

For optimal performance,

using a direct string indexing appears better in some tests. So the charAt method can be avoided to optimize programs.

CharAt example.

The charAt function takes a 1-character string at an index. It is the same as the string indexer in functionality.

For: We use the for-loop to iterate over the indexes in the string. We call charAt to get each individual letter.

forStrings
JavaScript program that uses charAt var letters = "abc"; // Loop over all string indexes. for (var i = 0; i < letters.length; i++) { // Use charAt to get a 1-char string. var result = letters.charAt(i); // The letter is a string that is 1 char long. console.log("LETTER: " + result); console.log("LETTER LENGTH: " + result.length); } Output LETTER: a LETTER LENGTH: 1 LETTER: b LETTER LENGTH: 1 LETTER: c LETTER LENGTH: 1

CharCodeAt.

This function converts a character at an index into its ASCII (or Unicode) equivalent int. It does not handle all Unicode values. But it can handle ASCII strings well.
JavaScript program that uses charCodeAt var letters = "abc"; for (var i = 0; i < letters.length; i++) { // Use charCodeAt to get ASCII values from letters. var point = letters.charCodeAt(i); console.log("CHARCODEAT: " + point); } Output CHARCODEAT: 97 CHARCODEAT: 98 CHARCODEAT: 99

String.fromCharCode.

With charCodeAt we get a character code from a string. And with String.fromCharCode we convert a character code back into a string.

Tip: With a character code, we can change the character value by adding or subtracting (like a number). We cannot do this with a string.

Tip 2: After the transformation, we can call String.fromCharCode to convert the code back into a string.

JavaScript program that uses String.fromCharCode var input = "c"; // Get char code and reduce it by one. var letterCode = input.charCodeAt(0); letterCode--; // Convert char code into a string. var result = String.fromCharCode(letterCode); // Display the values. console.log("INPUT: " + input); console.log("CHARCODEAT: " + letterCode); console.log("FROMCHARCODE: " + result); console.log("LENGTH: " + result.length); Output INPUT: c CHARCODEAT: 98 FROMCHARCODE: b LENGTH: 1

CharCodeAt, scan string.

With charCodeAt we can test a string for multiple values in a single pass. This can avoid excessive loops over a string with indexOf.Switch

Tip: With a charCodeAt loop, we can see if a string needs further processing, and only call replace() on it if needed.

Tip 2: This style of code can yield significant performance benefits—it can reduce string copies and make processing input faster.

JavaScript program that uses charCodeAt to scan string function hasParentheses(value) { for (var i = 0; i < value.length; i++) { var code = value.charCodeAt(i); switch (code) { case 40: // Left parenthesis. case 41: // Right parenthesis. return true; } } return false; } if (hasParentheses("cat(dog)")) { console.log(true); } if (!hasParentheses("bird")) { console.log(true); } Output true true

Benchmark, charAt.

Here we see 2 complete programs. The performance.now() method is used to time the script executions. The only difference is the inner if-statement.

First: We test each character in the string for the lowercase letter "c." All accesses are valid.

Second: We use the charAt() method. The total counts of matches is the same in both programs.

JavaScript program that uses string index var x1 = performance.now(); var word = "magic"; var c = 0; for (i = 0; i < 100000000; i++) { for (z = 0; z < word.length; z++) { if (word[z] == 'c') { c++; } } } var x2 = performance.now(); document.title = (x2 - x1) + "/" + c; JavaScript program that uses charAt var x1 = performance.now(); var word = "magic"; var c = 0; for (i = 0; i < 100000000; i++) { for (z = 0; z < word.length; z++) { if (word.charAt(z) == 'c') { c++; } } } var x2 = performance.now(); document.title = (x2 - x1) + "/" + c; Output 3037.23 ms string index 3062.15 ms charAt

A discussion.

The performance difference with charAt and charCodeAt is small. So this change will not help many JavaScript programs in a significant way.

And other changes,

like reducing total page weight, are probably more important for real-world performance. But in performance analysis everything matters.

On slower systems,

like phones, a superior algorithm can really make a program faster. It is worth using, for example, switch instead of if to get optimal performance.
Home
Dot Net Perls
© 2007-2019 Sam Allen. All rights reserved. Written by Sam Allen, info@dotnetperls.com.