The upper[]
method converts all lowercase characters in a string into uppercase characters and returns it.
Example
message = 'python is fun'
# convert message to uppercase
print[message.upper[]]
# Output: PYTHON IS FUN
Syntax of String upper[]
The syntax of upper[]
method is:
string.upper[]
upper[] Parameters
upper[]
method doesn't take any parameters.
upper[] Return Value
upper[]
method returns the uppercase string from the given string. It converts all lowercase characters to uppercase.
If no lowercase characters exist, it returns the original string.
Example 1: Convert a string to uppercase
# example string
string = "this should be uppercase!"
# string with numbers
# all alphabets should be lowercase
string = "Th!s Sh0uLd B3 uPp3rCas3!"
Output
THIS SHOULD BE UPPERCASE! TH!S SH0ULD B3 UPP3RCAS3!
Example 2: How upper[] is used in a program?
# first string
firstString = "python is awesome!"
# second string
secondString = "PyThOn Is AwEsOmE!"
if[firstString.upper[] == secondString.upper[]]:
print["The strings are same."]
else:
print["The strings are not same."]
Output
The strings are same.
Note: If you want to convert to lowercase string, use lower[]. You can also use swapcase[] to swap between lowercase to uppercase.
Now that we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more.
Prerequisites:Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.Objective:To understand that strings are objects, and learn how to use some of the basic methods available on those objects to manipulate strings.Strings as objects
Most things are objects in JavaScript. When you create a string, for example by using
const string = 'This is my string';
your variable becomes a string object instance, and as a result has a large number of properties and methods available to it. You can see this if you go to the
browserType[0];
7 object page and look down the list on the side of the page!Now, before your brain starts melting, don't worry! You really don't need to know about most of these early on in your learning journey. But there are a few that you'll potentially use quite often that we'll look at here.
Let's enter some examples into the browser developer console.
Finding the length of a string
This is easy — you use the
browserType[0];
8 property. Try entering the following lines:const browserType = 'mozilla';
browserType.length;
This should return the number 7, because "mozilla" is 7 characters long. This is useful for many reasons; for example, you might want to find the lengths of a series of names so you can display them in order of length, or let a user know that a username they have entered into a form field is too long if it is over a certain length.
Retrieving a specific string character
On a related note, you can return any character inside a string by using square bracket notation — this means you include square brackets [
browserType[0];
9] on the end of your variable name. Inside the square brackets, you include the number of the character you want to return, so for example to retrieve the first letter you'd do this:browserType[0];
Remember: computers count from 0, not 1!
To retrieve the last character of any string, we could use the following line, combining this technique with the
browserType[0];
8 property we looked at above:browserType[browserType.length-1];
The length of the string "mozilla" is 7, but because the count starts at 0, the last character's position is 6; using
browserType[browserType.length-1];
1 gets us the last character.Testing if a string contains a substring
Sometimes you'll want to find if a smaller string is present inside a larger one [we generally say if a substring is present inside a string]. This can be done using the
browserType[browserType.length-1];
2 method, which takes a single parameter — the substring you want to search for.It returns
browserType[browserType.length-1];
3 if the string contains the substring, and browserType[browserType.length-1];
4 otherwise.const browserType = 'mozilla';
if [browserType.includes['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
Often you'll want to know if a string starts or ends with a particular substring. This is a common enough need that there are two special methods for this:
browserType[browserType.length-1];
5 and browserType[browserType.length-1];
6:const browserType = 'mozilla';
if [browserType.startsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
const browserType = 'mozilla';
if [browserType.endsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
Finding the position of a substring in a string
You can find the position of a substring inside a larger string using the
browserType[browserType.length-1];
7 method. This method takes two parameters – the substring that you want to search for, and an optional parameter that specifies the starting point of the search.If the string contains the substring,
browserType[browserType.length-1];
7 returns the index of the first occurrence of the substring. If the string does not contain the substring, browserType[browserType.length-1];
7 returns const browserType = 'mozilla';
if [browserType.includes['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
0.const tagline = 'MDN - Resources for developers, by developers';
console.log[tagline.indexOf['developers']]; // 20
Starting at
const browserType = 'mozilla';
if [browserType.includes['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
1, if you count the number of characters [including the whitespace] from the beginning of the string, the first occurrence of the substring const browserType = 'mozilla';
if [browserType.includes['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
2 is at index const browserType = 'mozilla';
if [browserType.includes['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
3.console.log[tagline.indexOf['x']]; // -1
This, on the other hand, returns
const browserType = 'mozilla';
if [browserType.includes['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
0 because the character const browserType = 'mozilla';
if [browserType.includes['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
5 is not present in the string.So now that you know how to find the first occurrence of a substring, how do you go about finding subsequent occurrences? You can do that by passing in a value that's greater than the index of the previous occurrence as the second parameter to the method.
const firstOccurrence = tagline.indexOf['developers'];
const secondOccurrence = tagline.indexOf['developers', firstOccurrence + 1];
console.log[firstOccurrence]; // 20
console.log[secondOccurrence]; // 35
Here we're telling the method to search for the substring
const browserType = 'mozilla';
if [browserType.includes['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
2 starting at index const browserType = 'mozilla';
if [browserType.includes['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
7 [const browserType = 'mozilla';
if [browserType.includes['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
8], and it returns the index const browserType = 'mozilla';
if [browserType.includes['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
9.Extracting a substring from a string
You can extract a substring from a string using the
const browserType = 'mozilla';
if [browserType.startsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
0 method. You pass it:- the index at which to start extracting
- the index at which to stop extracting. This is exclusive, meaning that the character at this index is not included in the extracted substring.
For example:
const browserType = 'mozilla';
browserType.length;
0The character at index
const browserType = 'mozilla';
if [browserType.startsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
1 is const browserType = 'mozilla';
if [browserType.startsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
2, and the character at index 4 is const browserType = 'mozilla';
if [browserType.startsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
3. So we extract all characters starting at const browserType = 'mozilla';
if [browserType.startsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
2 and ending just before const browserType = 'mozilla';
if [browserType.startsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
3, giving us const browserType = 'mozilla';
if [browserType.startsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
6.If you know that you want to extract all of the remaining characters in a string after a certain character, you don't have to include the second parameter. Instead, you only need to include the character position from where you want to extract the remaining characters in a string. Try the following:
const browserType = 'mozilla';
browserType.length;
1This returns
const browserType = 'mozilla';
if [browserType.startsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
7 — this is because the character position of 2 is the letter const browserType = 'mozilla';
if [browserType.startsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
8, and because you didn't include a second parameter, the substring that was returned was all of the remaining characters in the string.Note:
const browserType = 'mozilla';
if [browserType.startsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
0 has other options too; study the const browserType = 'mozilla';
if [browserType.startsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
0 page to see what else you can find out.Changing case
The string methods
const browserType = 'mozilla';
if [browserType.endsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
1 and const browserType = 'mozilla';
if [browserType.endsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
2 take a string and convert all the characters to lower- or uppercase, respectively. This can be useful for example if you want to normalize all user-entered data before storing it in a database.Let's try entering the following lines to see what happens:
const browserType = 'mozilla';
browserType.length;
2Updating parts of a string
You can replace one substring inside a string with another substring using the
const browserType = 'mozilla';
if [browserType.endsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
3 method.In this example, we're providing two parameters — the string we want to replace, and the string we want to replace it with:
const browserType = 'mozilla';
browserType.length;
3Note that
const browserType = 'mozilla';
if [browserType.endsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
3, like many string methods, doesn't change the string it was called on, but returns a new string. If you want to update the original const browserType = 'mozilla';
if [browserType.endsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
5 variable, you would have to do something like this:const browserType = 'mozilla';
browserType.length;
4Also note that we now have to declare
const browserType = 'mozilla';
if [browserType.endsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
5 using const browserType = 'mozilla';
if [browserType.endsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
7, not const browserType = 'mozilla';
if [browserType.endsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
8, because we are reassigning it.Be aware that
const browserType = 'mozilla';
if [browserType.endsWith['zilla']] {
console.log['Found zilla!'];
} else {
console.log['No zilla here!'];
}
3 in this form only changes the first occurrence of the substring. If you want to change all occurrences, you can use const tagline = 'MDN - Resources for developers, by developers';
console.log[tagline.indexOf['developers']]; // 20
0:const browserType = 'mozilla';
browserType.length;
5Active learning examples
In this section, we'll get you to try your hand at writing some string manipulation code. In each exercise below, we have an array of strings, and a loop that processes each value in the array and displays it in a bulleted list. You don't need to understand arrays or loops right now — these will be explained in future articles. All you need to do in each case is write the code that will output the strings in the format that we want them in.
Each example comes with a "Reset" button, which you can use to reset the code if you make a mistake and can't get it working again, and a "Show solution" button you can press to see a potential answer if you get really stuck.
Filtering greeting messages
In the first exercise, we'll start you off simple — we have an array of greeting card messages, but we want to sort them to list just the Christmas messages. We want you to fill in a conditional test inside the
const tagline = 'MDN - Resources for developers, by developers';
console.log[tagline.indexOf['developers']]; // 20
1 structure to test each string and only print it in the list if it is a Christmas message.Think about how you could test whether the message in each case is a Christmas message. What string is present in all of those messages, and what method could you use to test whether it is present?
const browserType = 'mozilla';
browserType.length;
6const browserType = 'mozilla';
browserType.length;
7const browserType = 'mozilla';
browserType.length;
8Fixing capitalization
In this exercise, we have the names of cities in the United Kingdom, but the capitalization is all messed up. We want you to change them so that they are all lowercase, except for a capital first letter. A good way to do this is to:
- Convert the whole of the string contained in the
2 variable to lowercase and store it in a new variable.const tagline = 'MDN - Resources for developers, by developers'; console.log[tagline.indexOf['developers']]; // 20
- Grab the first letter of the string in this new variable and store it in another variable.
- Using this latest variable as a substring, replace the first letter of the lowercase string with the first letter of the lowercase string changed to upper case. Store the result of this replacement procedure in another new variable.
- Change the value of the
3 variable to equal to the final result, not theconst tagline = 'MDN - Resources for developers, by developers'; console.log[tagline.indexOf['developers']]; // 20
2.const tagline = 'MDN - Resources for developers, by developers'; console.log[tagline.indexOf['developers']]; // 20
Note: A hint — the parameters of the string methods don't have to be string literals; they can also be variables, or even variables with a method being invoked on them.
const browserType = 'mozilla';
browserType.length;
9const browserType = 'mozilla';
browserType.length;
7browserType[0];
1Making new strings from old parts
In this last exercise, the array contains a bunch of strings containing information about train stations in the North of England. The strings are data items that contain the three-letter station code, followed by some machine-readable data, followed by a semicolon, followed by the human-readable station name. For example:
browserType[0];
2We want to extract the station code and name, and put them together in a string with the following structure:
browserType[0];
3We'd recommend doing it like this:
- Extract the three-letter station code and store it in a new variable.
- Find the character index number of the semicolon.
- Extract the human-readable station name using the semicolon character index number as a reference point, and store it in a new variable.
- Concatenate the two new variables and a string literal to make the final string.
- Change the value of the
3 variable to the final string, not theconst tagline = 'MDN - Resources for developers, by developers'; console.log[tagline.indexOf['developers']]; // 20
6.const tagline = 'MDN - Resources for developers, by developers'; console.log[tagline.indexOf['developers']]; // 20
browserType[0];
4const browserType = 'mozilla';
browserType.length;
7browserType[0];
6Test your skills!
You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Strings.
Conclusion
You can't escape the fact that being able to handle words and sentences in programming is very important — particularly in JavaScript, as websites are all about communicating with people. This article has given you the basics that you need to know about manipulating strings for now. This should serve you well as you go into more complex topics in the future. Next, we're going to look at the last major type of data we need to focus on in the short term — arrays.