Working with Strings in Javascript Tutorial
Learn How to Work with Javascript Strings
Passionate Software Engineer with three years of experience, dedicated to creating robust and scalable web applications. I have a strong foundation in JavaScript, React, Python, and Node.js, and enjoy working with modern tech stacks to build innovative solutions. I'm committed to writing clean and efficient code, following best practices, and staying updated with the latest industry trends.
Throughout my career, I've gained valuable experience in full-stack development, including frontend design, backend development, and database management. I love solving complex problems and implementing creative solutions that enhance user experiences. I believe in the power of collaboration and thrive in cross-functional teams where I can contribute my skills and learn from others.
Beyond coding, I am an avid learner and enjoy sharing my knowledge with the developer community. I regularly contribute to open-source projects, write technical blog posts, and engage in discussions on emerging technologies. I'm always seeking opportunities to expand my skill set and stay at the forefront of software engineering.
In this article, we’ll look at some of the common ways to work with JavaScript strings!
This follows on from my previous post: The Basics of JavaScript Strings Tutorial, be sure to check it out if you haven't already!
The Anatomy of a String
Each character in a string is numbered, starting at 0. For example:
The first character is T at index position 0.
The last character is ! at index position 17.
The spaces also have index positions at 4, 7, and 10.
We can access any character like so:
charAt()
We can similarly use the charAt() method. It returns the character at the specified index in a string, such as:
indexOf()
We can use indexOf() if we wish to return an index number.
It returns the index of where the substring starts in the string, or -1 if the substring isn’t found. It’s case-sensitive.
You can use a conditional to test if a substring exists:
This works as we know that -1 results when nothing is found, so logically any result greater than -1 would mean the substring exists.
slice()
To get a portion of a string starting (and optionally ending) at a particular character, we can use slice().
This method can take 2 arguments. The first is the start position (0 is of course the first character), and the second optional argument is the end position. If either argument is a negative number, it will start at the end of the string and work backward.
Finding the Length of a String
To find the length of a string we can use the length property. It returns the number of characters in a string.
The length property returns the actual number of characters starting with 1, which in our example is 18, not the final index number, which starts at 0 and ends at 17.
Converting to Upper or Lower Case
The two methods toUpperCase() and toLowerCase() are useful ways to format our text.
toUpperCase()converts all text in a string to uppercase.
toLowerCase()converts all text in a string to lowercase.
split()
To divide a string up into sections & insert the contents into an array, we can use the split() method.
The argument we provide is the delimiter, the character that we’re using to split up our string.
In the below example, let's use the whitespace “ “ character as our delimiter:
We can now access each section via its array position.
We can also optionally provide a second argument to stop splitting a string after a certain number of delimiter matches have been found.
Let's look at another example, this time using a comma ‘, ‘ as our delimiter.
Our .split(', ', 2) stopped the split after the second comma, returning just the first two array entries.
trim()
The trim() method removes any white space from both ends of a string, but importantly not anywhere in between.
Whitespace can be tabs or spaces, the trim() method conveniently removes any excess.
replace()
If we wish to search through a string for a value and replace it with a new value, we use replace().
The first parameter will be the value to find, and the second will be the replacement value.
By default, the replace() method replaces the first match only. To replace all matches, you’ll need to pass in a regular expression using the global flag g. If we also want to ignore the case, we’d add the case insensitive flag i.
Here we’re telling every instance of google within our string (regardless of case), to be replaced by “Google”.
Converting Strings into Numbers
In this final section, let's take a quick look at some of the ways we can convert strings into numbers.
parseInt()
To convert a string into an integer (a whole number) we can use parseInt(). It takes two arguments, the first being the value we want to convert, and the second is called the radix. This is the base number used in mathematical systems. For our use, it should always be 10, the decimal system.
parseFloat()
If we wish to convert into a floating-point number (a number with decimal points), we’d use parseFloat().
Number()
We can convert our strings with the Number() method as well, however, it's stricter about which values it can convert. It only works with strings that consist of numbers.
NaN if you recall — stands for Not a number.
Conclusion
If you liked this post, make sure to follow me on Twitter where I post daily about Tech related things!
https://www.buymeacoffee.com/rembertdesigns
