Working with Strings in JavaScript Tutorial
Tags: javascript, beginners, tutorial, programming
Published: 2022-07-15 23:10:54

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](https://rembertdesigns.hashnode.dev/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:
![Javascript String](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mo5pyj1ljhyj9a2u1n5q.png)
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:
![Javascript String](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a07h2xdxlc25oe6d3gh7.png)

### charAt()
We can similarly use the `charAt()` method. It returns the character at the specified index in a string, such as:
![Javascript String](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7qpwiuicy6rkq8ryg88.png)

### 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.
![Javascript String](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvk1ixb515ek4makt2g6.png)
You can use a conditional to test if a substring exists:
![Javascript String](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3uivefnoki3fkz80qdbp.png)
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.
![Javascript String](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kz0tp8794fm9bezon25l.png)

## 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.
![Length String](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yj6r95zcvqppz4i9dnli.png)
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.
![Upper Case of Strings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cfdbgpm1elsdkv6ghto.png)
`toLowerCase()`converts all text in a string to lowercase.
![Lower Case of Strings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ptqy0caks08szb7hbq3.png)
### 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:
![Split Method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pewlrtywjmpohqf53lhk.png)
We can now access each section via its array position..
![Split Array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1sob9wu3f9pueliucukv.png)
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.
![Split Array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zsjvwoakefor87u4fim.png)
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.
![Trim Method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sg3hvyxzyfvbsz8n8ezp.png)
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.
![Replace Array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3g19euyappreox4bpm7.png)
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 case, we’d add the case insensitive flag `i`.
![Replace Array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afyeytqeuaehqel2labq.png)
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.
![Javascript String](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f976ljq7oe71bghwy02t.png)
### parseFloat()
If we wish to convert into a floating-point number (a number with decimal points), we’d use `parseFloat()`.
![Javascript String](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/evi54qm33ixp194p3rkw.png)
### 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.
![Javascript String](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uauyvf52ezixirvvy2i8.png)
`NaN` if you recall — stands for Not a number.

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)