String methods

A string is text, like "Asha" or "photo.png". JavaScript gives every string a set of built-in tools. These tools are called string methods.

You call a method with a dot, its name, and round brackets: name.trim(). Some methods need extra values inside the brackets, like file.endsWith(".png"). These extra values are called arguments.

Each method does one of three jobs:

• It answers a question, such as "Does this text contain a comma?"
• It copies out a piece of the text, such as the first four letters.
• It makes a new string with a change, such as all capital letters.

The answer a method gives back is called its return value.

You learned one rule in the Strings lesson: a string can't be changed after it is made. The word for this is immutable. So a string method never edits the original string. It makes a new value and gives it back. If you want to keep that new value, store it in a variable.

1const original = "  Hello, World!  ";2const result = original.trim().toLowerCase();3console.log(result);4console.log(original);

Pick a method in the workbench and compare the original with the result. The result changes with each method. The original string stays the same every time.

Try trim(), slice(), includes(), padStart(), replaceAll(), and split(). Each one is explained later in this lesson.

Each character in a string has a position number, called an index. Counting starts at 0, just like in arrays. In "tea", t is at index 0 and a is at index 2.

Three methods read the character at one index. Each gives back a different kind of answer:

• at(index) gives the character. A negative index counts from the end.
• charAt(index) also gives the character. It does not count from the end.
• charCodeAt(index) gives a number: the code JavaScript stores for that character.

1const drink = "tea";2console.log(drink.at(0));3console.log(drink.charAt(-1));4console.log(drink.charCodeAt(0));

Line 2 reads index 0 with at, so it prints t.

Line 3 asks charAt for index -1. charAt doesn't count from the end, so there is no character there. It gives back an empty string, "": a string with no characters. The console shows a blank line.

Line 4 prints 116. JavaScript stores each character as a number, called a UTF-16 code unit. 116 is the number for a small t. You will learn more about these numbers in the Unicode & string internals lesson.

Here are the same three methods on the word "JavaScript":

• "JavaScript".at(0) gives "J". at(-1) gives the last character, "t".
• charAt(0) also gives "J". But charAt(-1) gives an empty string.
• charCodeAt(0) gives 74, the number for a capital J.

When you want the last character, use at(-1).

To copy out more than one character, use slice(start, end). It copies from the start index up to the end index. The character at end is not included. If you leave out end, it copies to the end of the string. A negative number counts back from the end.

A second method, substring(start, end), also copies a piece. It works like slice for normal numbers. The two give different results in two cases:

• A negative number. slice counts it from the end. substring treats it as 0.
• A start that is bigger than the end. slice gives an empty string. substring swaps the two numbers first.

Step through both cases below. Guess what each line prints before you press Next.

1const text = "JavaScript";Run2const piece = text.slice(-6);3const other = text.substring(-6);4console.log(piece);5console.log(other);

Search methods answer one of two questions: "Where is it?" or "Is it there?"

• indexOf(text) gives the index where text first appears. If it is not there, it gives -1.
• lastIndexOf(text) does the same, but looks for the last place it appears.
• includes(text) gives true if text is there, and false if not.

A value that is always true or false is called a boolean.

These searches are case-sensitive. That means a capital letter and a small letter count as different characters. So "Hello".includes("hello") gives false.

People type in any mix of capitals. To search what they type, make both strings lowercase first: text.toLowerCase().includes(query.toLowerCase()).

Two more methods check only the start or the end of a string:

• startsWith(text) gives true if the string begins with text.
• endsWith(text) gives true if the string ends with text.

"invoice.pdf".endsWith(".pdf") gives true. It is easier to read than cutting off the last four characters yourself.

Both methods take an optional second argument. "Optional" means you can leave it out:

• For startsWith, it is the index where the check begins.
• For endsWith, it is how many characters from the front to look at. The check treats that as the end of the string.

1const code = "INV-42";2console.log(code.startsWith("42", 4));3console.log(code.endsWith("INV", 3));4console.log(code.endsWith("-42"));

Line 2 starts the check at index 4. That is where 42 begins, so it prints true.

Line 3 looks at only the first 3 characters, INV. Those characters end with INV, so it prints true.

Line 4 has no second argument, so it checks the real end of the string. The string ends with -42, so it prints true.

Step through the search and replace code below. Pick a setting, guess the output, then press Next.

1const text = "Hello hello Hello";Run2const first = text.indexOf("Hello", 1);3const hasLower = text.includes("hello");4const fixed = text.toLowerCase().includes("hello");5console.log(first, hasLower, fixed);

Change case on a copy

toUpperCase() makes a copy in capital letters. toLowerCase() makes a copy in small letters. The original string does not change.

You will use these for two jobs:

• Showing text in a different style, such as a heading in capitals.
• Comparing text the user typed, where capitals should not matter.

1const name = "Asha";2const heading = name.toUpperCase();3console.log(heading);4console.log(name);

Line 2 makes a copy in capitals and stores it in heading. Line 3 prints ASHA. Line 4 prints the original, Asha, which did not change.

Keep the original when the way it is written matters. Use the changed copy only where you need it.

Use the locale methods for text that people read in their own language. For text your code controls, like IDs, file endings, and comparisons, use plain toLowerCase(). Its result is the same everywhere.

Three methods make a string a set length or repeat it:

• padStart(length, fill) adds fill characters to the front until the string is length characters long.
• padEnd(length, fill) does the same, but adds them to the end.
• repeat(count) joins count copies of the whole string.

Some examples:

• "7".padStart(3, "0") gives "007".
• "1234".padStart(8, "*") gives "****1234".
• "ab".repeat(3) gives "ababab".

Whitespace means characters you can't see: spaces, tabs, new lines, and non-breaking spaces. A non-breaking space is a space that keeps two words on the same line.

Three methods remove whitespace from the edges of a string:

• trim() removes it from both ends.
• trimStart() removes it from the start only.
• trimEnd() removes it from the end only.

This string has tabs (\t), new lines (\n), and spaces around the word hi: "\t\n  hi  \n". Trimming it in real JavaScript leaves "hi".

1const ticket = "7";2console.log(ticket.padStart(3, "0"));3console.log("ha".repeat(2));4console.log("tea".padEnd(5, "."));

Line 2 pads the ticket to 3 characters, so it prints 007. Line 3 repeats the whole string twice and prints haha. Line 4 pads on the right to 5 characters and prints tea...

The first number you give padStart or padEnd is the final length. It is not how many characters to add.

replace(find, newText) makes a copy where find is swapped for newText. When find is a string, only the first match is swapped.

replaceAll(find, newText) swaps every match.

The second argument can also be a function. JavaScript calls it with the matched text, and uses what the function returns as the new text. To see one, pick the replace setting in the step-through above.

split(separator) cuts a string into pieces and gives back an array of those pieces. The separator is the text to cut at, such as a comma. A second argument, the limit, says how many pieces to keep. "a,b,c".split(",", 2) gives ["a", "b"].

concat joins strings into one. Most code joins strings with + or with a template literal instead. A template literal is a string in backticks, like `Hi, ${name}`. The next lesson, Template literals & tagged templates, covers them.

1const tags = "js,web,css";2const pieces = tags.split(",");3const displayName = "Asha".concat(" ", "Khan");4console.log(pieces.length);5console.log(displayName);

Line 2 cuts the tags at each comma. That makes an array of 3 pieces, so line 4 prints 3.

Line 3 starts with "Asha" and joins a space and "Khan" to it. Line 5 prints Asha Khan.

Use split when you need separate pieces. Use concat, +, or a template literal when you need one string.

Almost every website cleans, searches, and formats text. For example:

• usernames and search boxes
• order numbers and labels
• file names and web addresses
• card numbers where only the last four digits show

A small function that does one of these jobs is often called a helper.

1function cleanUsername(input) {2  return input.trim().toLowerCase();3}4 5function orderLabel(orderNumber) {6  return "ORD-" + String(orderNumber).padStart(5, "0");7}8 9console.log(cleanUsername("  ADA  "));10console.log(orderLabel(42));

Line 2 removes the outside spaces, then makes the copy lowercase. Line 9 prints ada. Use this cleaned name for comparing. If the page should show the name the way the user wrote it, keep the original for that.

Line 6 turns the number into a string with String(), then pads it to 5 characters. Line 10 prints ORD-00042. Every order label now has the same length, so a list of them lines up and sorts in order.

1const products = ["Tea", "Coffee", "Toast"];2const typed = " tea ".trim().toLowerCase();3const matches = products.filter((product) => product.toLowerCase().includes(typed));4console.log(matches.length);5console.log(matches[0]);

Line 2 cleans what the user typed: no outside spaces, all lowercase.

Line 3 uses the array method filter. It keeps each product whose lowercase copy includes the search text. Capitals don't matter, because both sides are lowercase.

Line 4 prints 1, the number of matches. Line 5 prints Tea with its capital T. The product names in the array never change. Only the copies used for comparing are lowercase.

1const fileName = "avatar.PNG";2const extension = fileName.slice(fileName.lastIndexOf(".")).toLowerCase();3console.log(extension);4console.log(extension === ".png");

Line 2 calls three methods, one after another:

• lastIndexOf(".") finds the index of the last dot.
• slice copies from that dot to the end: ".PNG".
• toLowerCase makes that copy lowercase, so capitals don't matter.

Line 3 prints .png and line 4 prints true.

This check only gives the user quick feedback on the page. It does not make uploads safe. The server must check uploaded files too.

The table below sorts string methods by the kind of job they do. Read each row as: this kind of job gives back this kind of value, for example this.

Common misconceptions

1const title = "  tea party  ";2console.log(title.trim());3console.log(title.includes("tea party"));4console.log(String(42).padStart(4, "0"));

Line 2 removes only the spaces at the two ends, so it prints tea party. The space between the words stays.

Line 3 prints true: the words tea party, with their space, are still inside title.

Line 4 turns the number 42 into the string "42" first. Numbers don't have padStart; strings do. It prints 0042.

Here are the mistakes people make most often, and what is really true:

• "Methods change the string." They give back a new value. Store the result if you want to keep it.
• "includes ignores capitals." It is case-sensitive. Make both strings lowercase first when capitals should not matter.
• "slice and substring are the same." They differ for negative numbers and for a start bigger than the end.
• "replace swaps every match." With a string to find, it swaps only the first match. Use replaceAll for every match.
• "padStart(3, "0") adds three zeros." The 3 is the final length. "7" gets two zeros.
• "Every character you see is one index." Some characters, like many emoji, take two indexes. The Unicode lesson explains why.

Key takeaways

• A string method either answers a question or gives back a new value: a string, an array, a character, a number, or true/false.
• The original string never changes. Store the result in a variable to keep it.
• slice counts negative numbers from the end. substring treats them as 0, and swaps its two numbers when the start is bigger.
• Searches are case-sensitive. replace with a string swaps only the first match.
• To pick a method, first name the job: read, copy out, search, change case, pad, trim, replace, or split and join.

String methods are JavaScript's tools for text. Each one reads a string or gives back a new value; none of them changes the original.

Up next: Template literals & tagged templates.