Mastering Case Transformations in JavaScript

How to Convert a String to Lowercase and Uppercase in JavaScript

String case conversion is a fundamental operation in JavaScript. While simple methods exist, we can explore more complex, creative, and performance-optimized ways to handle case transformation. This article covers multiple techniques, including built-in methods, ASCII manipulation, regex-based approaches, and even WebAssembly for extreme performance.

1. Using Built-In Methods

Lowercase Conversion

1 const str = "Hello World!";
2 const lower = str.toLowerCase();
3 console.log(lower); // Output: hello world!

Uppercase Conversion

1 const upper = str.toUpperCase();
2 console.log(upper); // Output: HELLO WORLD!

2. ASCII-Based Conversion (Manual Transformation)

Using ASCII values allows precise control over case conversion.

1 function toLowerCaseASCII(str) {
2     return str.split('').map(char => {
3         let code = char.charCodeAt(0);
4         return (code >= 65 && code <= 90) ? String.fromCharCode(code + 32) : char;
5     }).join('');
6 }
7 
8 function toUpperCaseASCII(str) {
9     return str.split('').map(char => {
10         let code = char.charCodeAt(0);
11         return (code >= 97 && code <= 122) ? String.fromCharCode(code - 32) : char;
12     }).join('');
13 }
14 
15 console.log(toLowerCaseASCII("JavaScript")); // javascript
16 console.log(toUpperCaseASCII("JavaScript")); // JAVASCRIPT

3. Using Regular Expressions

1 function toLowerCaseRegex(str) {
2     return str.replace(/[A-Z]/g, letter => String.fromCharCode(letter.charCodeAt(0) + 32));
3 }
4 
5 function toUpperCaseRegex(str) {
6     return str.replace(/[a-z]/g, letter => String.fromCharCode(letter.charCodeAt(0) - 32));
7 }
8 
9 console.log(toLowerCaseRegex("RegEx Example")); // regex example
10 console.log(toUpperCaseRegex("RegEx Example")); // REGEX EXAMPLE

4. Using WebAssembly (WASM) for Maximum Performance

WebAssembly (WASM) can be used for case conversion, achieving near-native speed. Below is a basic WebAssembly module written in C:

1 #include <emscripten.h>
2 #include <string.h>
3 
4 EMSCRIPTEN_KEEPALIVE
5 void toUpperCase(char *str) {
6     for (int i = 0; str[i] != '\0'; i++) {
7         if (str[i] >= 'a' && str[i] <= 'z') {
8             str[i] -= 32;
9         }
10     }
11 }
12 
13 EMSCRIPTEN_KEEPALIVE
14 void toLowerCase(char *str) {
15     for (int i = 0; str[i] != '\0'; i++) {
16         if (str[i] >= 'A' && str[i] <= 'Z') {
17             str[i] += 32;
18         }
19     }
20 }

Compile this into WASM and use it in JavaScript:

1 fetch('case_conversion.wasm').then(response => response.arrayBuffer()).then(bytes => {
2     WebAssembly.instantiate(bytes, {}).then(result => {
3         const toUpperCase = result.instance.exports.toUpperCase;
4         const toLowerCase = result.instance.exports.toLowerCase;
5         
6         let strPtr = allocateString("wasm Example");
7         toUpperCase(strPtr);
8         console.log(getString(strPtr)); // WASM EXAMPLE
9     });
10 });

Conclusion

JavaScript provides multiple ways to convert string cases, from simple methods like toLowerCase() and toUpperCase() to advanced techniques involving ASCII manipulation, regex, and WebAssembly. Depending on performance needs and complexity, developers can choose the best method for their use case.