HomeSearch

JavaScript toLowerCase Examples

Transform the cases of strings with the toLowerCase and toUpperCase functions.

ToLowerCase.

A cat sleeps. A cat is sometimes awake. It is the same cat in either state, but with a different level of awareness.

Like the cat,

a letter can be in one of two states—uppercase or lowercase. Characters have cases. In JavaScript we can transform cases dynamically with toLowerCase and toUpperCase.

ToLowerCase.

Here is a simple example. We use the methods toUpperCase and toLowerCase—these are the same as ToUpper, ToLower, upper, lower, upcase and downcase methods in other languages.

Example: In case you are wondering, here is how you can use toUpperCase and toLowerCase.

Original: The original string we call these methods on is left unchanged and be used again.

Here: We take a string in mixed case (title case) and transform it to uppercase and then to all lowercase.

Strings
JavaScript program that uses toUpperCase, toLowerCase var color = "Blue"; // Create a copy of the string and uppercase it. // ... The original is left alone. var upper = color.toUpperCase(); console.log("BEFORE: " + color); console.log("AFTER (UPPER): " + upper); // Lowercase a string. var lower = upper.toLowerCase(); console.log("BEFORE: " + upper); console.log("AFTER (LOWER): " + lower); Output BEFORE: Blue AFTER (UPPER): BLUE BEFORE: BLUE AFTER (LOWER): blue

Uppercase first.

Here we have the string "cat" and we transform the string. We access the first letter with the index 0, and uppercase this entire string. Then we add the remaining part.

Tip: This method works well on strings of 1 character or more. And it can be placed in a function for easier reuse.

JavaScript program that uppercases first letter var animal = "cat"; // Uppercase first letter in a string. var uppercase = animal[0].toUpperCase() + animal.substring(1); console.log("RESULT: " + uppercase); Output RESULT: Cat

Uppercase first, function.

Here we introduce the upperFirst function. It tests the argument to see if it has a length of 1 or greater. And then it uppercases the first letter in the string.

Tip: This function handles zero-length strings. For strings with an initial letter already uppercased, it changes nothing.

JavaScript program that uses function function upperFirst(value) { if (value.length >= 1) { return value[0].toUpperCase() + value.substring(1); } return value; } // Test upperFirst on many strings. var values = ["cat", "", "c", "dog", "BIRD"]; for (var i = 0; i < values.length; i++) { console.log("STRING: " + values[i]); console.log("UPPERFIRST: " + upperFirst(values[i])); } Output STRING: cat UPPERFIRST: Cat STRING: UPPERFIRST: STRING: c UPPERFIRST: C STRING: dog UPPERFIRST: Dog STRING: BIRD UPPERFIRST: BIRD

Uppercase all words.

With an iterative algorithm, we can uppercase all words in a string. Here we loop over the characters in a string.

And: On the first character, or a lowercase-range ASCII letter following a space, we append the uppercase form of the letter.

For other chars: We just append the original character. The result is built up as we go a long, and returned in the final line.

JavaScript program that uppercases all words in string function uppercaseAllWords(value) { // Build up result. var result = ""; // Loop over string indexes. for (var i = 0; i < value.length; i++) { // Get char code at this index. var code = value.charCodeAt(i); // For first character, or a lowercase range char following a space. // ... The value 97 means lowercase A, 122 means lowercase Z. if (i === 0 || value[i - 1] === " " && code >= 97 && code <= 122) { // Convert from lowercase to uppercase by subtracting 32. // ... This uses ASCII values. result += String.fromCharCode(code - 32); } else { result += value[i]; } } return result; } console.log("RESULT: " + uppercaseAllWords("welcome visitors, enjoy your stay")); Output RESULT: Welcome Visitors, Enjoy Your Stay

Benchmark.

Consider these two pages. The first uses a static lookup table to precompute a lowercase string. The second calls toLowerCase many times, each time it is needed.

Result: The inner loop executes faster when the result of toLowerCase is precomputed and stored.

So: If you have a string that must be lowercased many times, it may be beneficial to store its lowercase form.

JavaScript program that uses lookup table var x1 = performance.now(); var sum = 0; var items = ["Carrot", "carrot"]; // Use lookup table instead of lowercasing a string. for (var i = 0; i < 10000000; i++) { sum += items[0].length; sum += items[1].length; } var x2 = performance.now(); document.title = (x2 - x1) + "/" + sum; JavaScript program that uses toLowerCase var x1 = performance.now(); var sum = 0; var item = "Carrot"; // Call toLowerCase to transform the string. for (var i = 0; i < 10000000; i++) { sum += item.length; sum += item.toLowerCase().length; } var x2 = performance.now(); document.title = (x2 - x1) + "/" + sum; Output 954 ms lookup table 1456 ms toLowerCase

Benchmark, notes.

I have found that Google Chrome loads pages faster when lowercased strings are stored in the JavaScript source directly.

Benchmark, constant strings.

Avoiding toLowerCase on constant strings is worthwhile. The GZIP algorithm can eliminate most of the cost of loading these static strings.

For performance,

we can avoid excessive string transformations. We can cache lowercase or uppercase forms, or store them directly in the JS source.

In lowercasing strings,

we transform only certain characters. Things like numbers and spaces and punctuation are left alone. Often it is best to cache the required string in your JS source.
Home
Dot Net Perls
© 2007-2019 Sam Allen. All rights reserved. Written by Sam Allen, info@dotnetperls.com.