- Convert a string to lowercase in javascript
- Using string’s toLowerCase() method.
- Converting some characters of the string to lowercase.
- Converting first character to lowercase.
- Using Array to make string lowercase.
- JavaScript toLowerCase()
- Introduction to the JavaScript toLowerCase() method
- Calling JavaScript toLowerCase() method on null or undefined
- Converting a non-string to a string
- Summary
- How to Lowercase a String in JavaScript – toLowerCase() in JS
- What is a String?
- What is a Method?
- How Does the toLowerCase() Method Work?
- What to Keep in Mind When Using the toLowerCase Method
- Strings are immutable
- The toLowerCase() method returns a new string
- Strings are case sensitive
- toLowerCase() Method Example – How to Check if the User Input Matches
Convert a string to lowercase in javascript
Learn how to convert a string to lowercase in javascript.
There are situations some times where you want to convert the single, multiple or each character of the string to lowercase. We will see different ways in which we can achieve the same in javascript.
Using string’s toLowerCase() method.
It only converts the alphabets. Numeric and special characters are untouched.
let str = 'ABCDEFGHIGKL'; str = str.toLowerCase(); console.log(str); //"abcdefghigkl"
Javascript toLowerCase() method converts each character of the string to the lowercase and returns the converted string. It does not manipulate the original string.
Converting some characters of the string to lowercase.
We will loop through all the characters of the string and convert only the required characters to the lowercase.
let vowels = ['A', 'E', 'I', 'O', 'U']; let str = "LEARNERSBUCKET IS THE BEST WEBSITE TO LEARN PROGRAMMING"; let temp = ""; for(let chars of str)< if(vowels.includes(chars))< temp += chars.toLowerCase(); >else < temp += chars; >> console.log(temp); //"LeaRNeRSBuCKeT iS THe BeST WeBSiTe To LeaRN PRoGRaMMiNG"
We have converted all the vowels to the lowercase and created a new string.
Converting first character to lowercase.
let str = "EXAMPLE"; let temp = str.slice(0,1).toLowerCase() + str.slice(1, str.length); console.log(temp); //eXAMPLE
Using Array to make string lowercase.
We will loop through the each character of the string and check the ASCII value of the each character with charCodeAt().
If the character is uppercase alphabet then we will convert it to lowercase with fromCharCode(). Else we will keep the original character.
let str = 'A(B)CDEFG2HI3GK%!78L'; let temp = ""; for(let chars of str)< //Get the ascii value of character let value = chars.charCodeAt(); //If the character is in uppercase if(value >= 65 && value else < //else add the original character temp += chars; >> console.log(temp); //"a(b)cdefg2hi3gk%!78l"
fromCharCode() creates a character with the ASCII value and charCodeAt() returns the ASCII value of the character.
JavaScript toLowerCase()
Summary: in this tutorial, you’ll learn how to use the JavaScript String.prototype.toLowerCase() method to return a string with all the characters converted to lowercase.
Introduction to the JavaScript toLowerCase() method
The toLowerCase() method returns a new string with all characters converted to lowercase. The following shows the syntax of the toLowerCase() method:
str.toLowerCase()
Code language: CSS (css)
const message = 'Hi'; const newMessage = message.toLowerCase(); console.log(newMessage);
Code language: JavaScript (javascript)
Because a string is immutable, the toLowerCase() method doesn’t change the original string. Instead, it returns a new string with all characters converted to lowercase.
Calling JavaScript toLowerCase() method on null or undefined
If you call the toLowerCase() method on null or undefined , the method will throw a TypeError exception.
The following findUserById function returns a string if the id is greater than zero or null otherwise:
const findUserById = (id) => < if (id > 0) < // look up the user from the database // . // return 'admin'; > return null; >;
Code language: JavaScript (javascript)
If you call the toLowerCase() method on the result of the findUserById() function, you’ll get the TypeError when the id is zero or negative:
console.log(findUserById(-1).toLowerCase());
Code language: CSS (css)
TypeError: Cannot read properties of null (reading 'toLowerCase')
Code language: JavaScript (javascript)
To make it safe, you can use the optional chaining operator ?. as follows:
console.log(findUserById(-1)?.toLowerCase());
Code language: CSS (css)
undefined
Code language: JavaScript (javascript)
Converting a non-string to a string
The toLowerCase() method will convert a non-string value to a string if you set its this value to a non-string value. For example:
const user = < username: 'JOE', toString() < return this.username; >, >; const username = String.prototype.toLowerCase.call(user); console.log(username);
Code language: JavaScript (javascript)
In this example, we invoke the toLowerCase() method with the this sets to the user object by using the call() method. The toLowerCase() method converts the user object to a string by calling its toString() method.
Summary
How to Lowercase a String in JavaScript – toLowerCase() in JS
Ilenia Magoni
Strings are a fundamental part of working with JavaScript. And the toLowerCase() method is one of the many integrated methods that you can use to work with strings.
In this article, we’ll see how to make strings lowercase with the toLowerCase() method in Python.
What is a String?
A string is a data type that can contain many different characters. A string is written as a series of characters between single or double quotes.
const exampleString = 'I am a String!' console.log(exampleString); // I am a String!
What is a Method?
A method is a function that you can use on a specific data type. Methods can either take or not take arguments.
How Does the toLowerCase() Method Work?
The toLowerCase() method is a string method that returns a new string that’s completely lowercase. If the original string has uppercase letters, in the new string these will be lowercase. Any lowercase letter, or any character that is not a letter, is not affected.
console.log(exampleString.toLowerCase()); // i am a string! console.log('FREECODECAMP'.toLowerCase()); // freecodecamp
What to Keep in Mind When Using the toLowerCase Method
The toLowerCase() method does a pretty straightforward thing: it creates a new string where all the uppercase letters are now lowercase. But there are a few things to keep in mind when using it. Let’s take a look at them.
Strings are immutable
Strings are an immutable data type, which means they can’t be changed. The original string will stay unchanged after you use the toLowerCase() method.
In the examples above, the toLowerCase() method has acted on the exampleString but never changed it. Checking the value of exampleString still shows the original value:
console.log(exampleString); // I am a string! console.log(exampleString.toLowerCase()); // i am a string! console.log(exampleString); // I am a string!
The toLowerCase() method returns a new string
This means that the toLowerCase() method returns a new string. You’ll need to save it in a variable if you want to use it again in your code.
const newString = exampleString.toLowerCase() console.log(newString); // i am a string!
Strings are case sensitive
Strings are case sensitive, so a lowercase string is different than an uppercase string.
console.log('freecodecamp' === 'FREECODECAMP'); // false
This is useful when thinking about what the toLowerCase() method could be useful for. In the example you will see how this feature makes the toLowerCase() method useful and necessary when building a script or program that deals with strings.
toLowerCase() Method Example – How to Check if the User Input Matches
Let’s write a small app that asks the user a question, gets the input, and gives feedback about the user’s answer.
There are various ways to do that: you could use this in a web app, getting the value from an input element with type=»text» . To keep it simple, in the example you will see the usage of the prompt JavaScript function.
The prompt function will display a browser message popup with an input field in which the user can write an answer:
const answer = prompt("What color is the sun?") if (answer === "yellow") < alert("Correct!") >else
This code asks the user a question, «What color is the sun?», and waits for an answer. Then it checks if the answer is «yellow», and if it is it prints «Correct!» If it isn’t, it prints «That is not the correct color!».
But there is an issue with this code.
Running this code, you will have this question asked in the popup:
If you answer «Yellow», it says «That is not the correct color!»
Remember that strings are case sensitive. The script is checking if the user input the string yellow – Yellow , with a capital «Y», is a different string.
You can easily fix this by using the toLowerCase() method, and doing this small change to the code:
const answer = prompt("What color is the sun?") if (answer.toLowerCase() === "yellow") < alert("Correct!") >else
What changed? Writing answer.toLowerCase() you make sure that the checked string is completely lowercase before comparing it with the correct answer string «yellow». In this way it doesn’t matter if the user writes «YELLOW» or «yELLOW» or «yellow» – it is all converted to lowercase.
Thanks for reading! Now you know how to use the toLowerCase() method in JavaScript.