Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
ES2022 JavaScript at() Method
JavaScript ES2022 introduced the at() method for strings, providing a more robust way to retrieve characters at specific positions. Unlike the traditional charAt() method, at() supports negative indexing and handles edge cases more gracefully.
Syntax
string.at(index)
Where string is the target string and index is the position (zero-based). Returns the character at the specified index, or undefined if the index is out of range.
Basic Usage
Here's how to retrieve the first character of a string:
<html>
<body>
<p id="result1"></p>
<script>
let greeting = "Hello, world!";
let firstChar = greeting.at(0);
document.getElementById("result1").innerHTML = "First character: " + firstChar;
</script>
</body>
</html>
First character: H
Negative Indexing
The at() method supports negative indices, counting from the end of the string:
<html>
<body>
<p id="result2"></p>
<script>
let greeting = "Hello, world!";
let lastChar = greeting.at(-1);
let secondLastChar = greeting.at(-2);
document.getElementById("result2").innerHTML =
"Last: " + lastChar + ", Second last: " + secondLastChar;
</script>
</body>
</html>
Last: !, Second last: d
Out-of-Range Handling
When the index is out of bounds, at() returns undefined:
<html>
<body>
<p id="result3"></p>
<script>
let greeting = "Hello, world!";
let outOfRange = greeting.at(100);
document.getElementById("result3").innerHTML =
"Character at index 100: " + outOfRange;
</script>
</body>
</html>
Character at index 100: undefined
Comparison: at() vs charAt()
| Feature | at() | charAt() |
|---|---|---|
| Negative indices | ? Supported | ? Not supported |
| Out-of-bounds | Returns undefined | Returns empty string "" |
| Unicode handling | Better support | Limited support |
| Browser support | ES2022+ (newer) | All browsers |
Practical Example
Here's a comparison showing both methods in action:
<html>
<body>
<p id="result4"></p>
<script>
let text = "JavaScript";
// Using at() method
let firstWithAt = text.at(0);
let lastWithAt = text.at(-1);
let outOfBoundsAt = text.at(20);
// Using charAt() method
let firstWithCharAt = text.charAt(0);
let lastWithCharAt = text.charAt(text.length - 1);
let outOfBoundsCharAt = text.charAt(20);
document.getElementById("result4").innerHTML = `
at(0): ${firstWithAt} | charAt(0): ${firstWithCharAt}<br>
at(-1): ${lastWithAt} | charAt(length-1): ${lastWithCharAt}<br>
at(20): ${outOfBoundsAt} | charAt(20): "${outOfBoundsCharAt}"
`;
</script>
</body>
</html>
at(0): J | charAt(0): J at(-1): t | charAt(length-1): t at(20): undefined | charAt(20): ""
Browser Compatibility
The at() method is supported in modern browsers (Chrome 92+, Firefox 90+, Safari 15.4+). For older browser support, consider using Babel or polyfills.
Conclusion
The ES2022 at() method provides a more intuitive and robust way to access string characters, especially with its support for negative indexing and better error handling. It's the recommended approach for new JavaScript projects targeting modern browsers.
327 Views
