JavaScript Strings Tutorial
A JavaScript string is a series of characters enclosed in single or double quotes. In more recent versions of JavaScript, strings can also be enclosed in backticks with added features and flexibility; these are referred to as template literals.
A string is a primitive data type, yet JavaScript provides a String class with properties and methods for use with string literals and variables. Dot syntax is used to apply these properties and methods to string instances. For example, the length
property returns the number of characters in a string. It is applied as follows:
var str = 'hello';
var len = str.length; // 5
String methods do not modify the strings they are applied to. Instead they return new strings. We demonstrate by applying the toUppercase
method to an example string:
var str = 'hello';
var str2 = str.toUpperCase();
// display string returned by toUppercase
console.log( str2 ); // HELLO
// display original string
console.log( str ); // hello
As you can see, the toUpperCase
method converts all the characters of the string to uppercase. What if we want to convert just the first character to uppercase?
JavaScript does not provide a large number of string methods, so when you want to accomplish something a little more complex, you have to be creative. Since the string methods return modified strings, we can chain them, applying subsequent methods to the results of the previous.
To convert the first letter of a string to uppercase, we combine the charAt
, toUppercase
, and slice
methods as follows:
var str = 'hello';
var str2 = str.charAt(0).toUpperCase() + str.slice(1);
console.log( str2 ); // Hello
Using JavaScript String Methods
This tutorial describes JavaScript's string methods and demonstrates how to use them. We present them using a task-oriented approach:
- How to select substrings in JavaScript.
- How to convert JavaScript strings to arrays.
- How to perform regular expression search and replace on JavaScript strings.
- How to search strings in JavaScript using basic methods, and methods that give detailed information about search results.
The table below lists JavaScript string methods, gives a brief description of each, and provides links to the pages where they are discussed and demonstrated:
Name | Description | Page |
---|---|---|
indexOf |
Search string; return location of match or -1. | Search |
lastIndexOf |
Search string; return location of last match or -1. | Search |
search |
Search string using regular expression; return location of match or -1. | Search |
match |
Search string using regular expression; return array containing results. | Match |
replace |
Return new string resulting from regular expression search and replace. | Replace |
slice |
Return substring as specified by start and end locations in string. | Slice |
substring |
Similar to slice , but doesn't support negative integer arguments. |
Slice |
split |
Return array of substrings by splitting string on separator you specify. | Split |
toUpperCase |
Return new string with all characters in uppercase. | Basics |
toLowerCase |
Return new string with all characters in lowercase. | |
charAt |
Return the character at the specified location. | Basics |
charCodeAt |
Return Unicode encoding of character at specified location. | |
fromCharCode |
Static method; return string from list of Unicode numeric encodings. | |
trim |
Return new string with whitespace removed from beginning and end. |
Updates to the JavaScript specification have added new string methods. MDN maintains an up-to-date list complete with browser-support information.