There exists a String object method in JavaScript that gives us the ability to figure out which character is at a given index in a string. This article will tell you about that method and show how to use it.
For this method, we turn to our primitive types in JavaScript. What are those types? What does primitive even mean?
Primitive types, or values, are items that are not objects and don’t have methods associated with them. In JavaScript, the primitives are string, number, boolean, bigint, symbols, and undefined. Today, we’re going to focus on the string primitive value.
What’s interesting about the primitive string value is that it’s usually interchangeable with the primitive String object. In most cases, JavaScript will automatically wrap a primitive String object wrapper around a primitive string and coerce the use of String methods. So, in most cases, you don’t need to worry about changing a primitive string (with no methods available) to a primitive String Object (with methods available).
Syntax
The syntax for the String charAt() method is fairly straightforward. We start with the string we want to look at. Since it’s a String Object, we use the dot notation to access the method and attach it to the end. To invoke it, we add parentheses to the end with the index we want to look up.
const charAtFive = new String("It is warm today.").charAt(5));The charAt() method returns the character at that index in the string. Remember that strings are zero-based so indexes start at 0 and go from there in sequential order. Here is a working implementation – use the inputs to add a string and an index and then hit submit. Unless you’ve asked for an index out of range, it should return a single character at the index you asked for.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form onsubmit=handleSubmit(event)>
<label for="to-fixed">Enter a string:</label>
<input id="to-fixed" onchange=handleChange(event) type="text" name="inputVal" value=""/>
<label for="num-digits">Enter an index:</label>
<input id="num-digits" onchange=handleChange(event) type="text" name="numVal" value=""/>
<input type="submit" value="Submit" />
</form>
<h3 id="root"></h3>
<script>
let inputVal = '';
let numVal = '';
let errorVal = '';
const handleChange = e => {
if(e.target.name === "inputVal") {
inputVal = e.target.value;
} else {
if(inputVal.length - 1 < e.target.value || e.target.value < 0) {
errorVal = "Must enter index less than length of string and greater or equal to 0"
} else {
errorVal = "";
numVal = e.target.value;
}
}
}
const handleSubmit = e => {
e.preventDefault();
console.log(e)
const root = document.querySelector("#root");
if(errorVal) {
root.innerHTML = errorVal;
} else {
root.innerHTML = new String(inputVal).charAt(Number(numVal));
console.log(new String(inputVal).charAt(Number(numVal)));
}
}
const inputValue = document.getElementById("to-fixed").value
</script>
</body>
</html>What Should You Take A Look At Next?
JavaScript Reverse String Code Challenge
JavaScript Pop Method: What is It and How to Use It
How to Use Substring in JavaScript
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
