String to Unicode Converter Online: JavaScript Functions and Sample Code

There are a number of ways to convert a string to its Unicode representation in JavaScript, depending on the desired format of the output. Here are a few approaches, each with explanations and examples: 

 

Method 1: Using charCodeAt() for individual characters

This method iterates through each character in the string and uses charCodeAt() to get its Unicode code point. It's suitable when you need the individual code points for each character.

function stringToUnicodeCodePoints(str) {
  let codePoints = [];
  for (let i = 0; i < str.length; i++) {
    codePoints.push(str.charCodeAt(i));
  }
  return codePoints;
}

let myString = "Hello, world!";
let unicodePoints = stringToUnicodeCodePoints(myString);
console.log(unicodePoints); // Output: [72, 101, 108, 108, 111, 44, 32, 119, 111, 114, 108, 100, 33]

 

Explanation:

• The function stringToUnicodeCodePoints takes a string str as input.
• It initializes an empty array codePoints to store the Unicode code points.
• It iterates through the string using a for loop.
• Inside the loop, str.charCodeAt(i) gets the Unicode code point of the character at index i.
• The code point is added to the codePoints array.
• Finally, the function returns the codePoints array.

 

Method 2: Using codePointAt() for handling supplementary characters

charCodeAt() only returns the code unit for characters within the Basic Multilingual Plane (BMP). For characters outside the BMP (supplementary characters, like emojis), you need codePointAt(). This method handles these characters correctly by returning their full Unicode code point.

function stringToUnicodeCodePointsAdvanced(str) {
  let codePoints = [];
  for (let i = 0; i < str.length; i++) {
    let codePoint = str.codePointAt(i);
    // Handle surrogate pairs (for characters outside the BMP)
    if (codePoint > 0xFFFF) {
      i++; // Skip the next code unit
    }
    codePoints.push(codePoint);
  }
  return codePoints;
}

let myStringWithEmoji = "Hello, world! 👋";
let unicodePointsAdvanced = stringToUnicodeCodePointsAdvanced(myStringWithEmoji);
console.log(unicodePointsAdvanced); //Output:  [72, 101, 108, 108, 111, 44, 32, 119, 111, 114, 108, 100, 33, 128075]

 

Explanation:

• This function is similar to the previous one, but it uses codePointAt(i) instead of charCodeAt(i).
• The crucial addition is the if condition: If codePoint is greater than 0xFFFF (the upper limit of the BMP), it means we're dealing with a supplementary character represented by a surrogate pair. The i++ increments the loop counter to skip the next code unit (the low surrogate).

 

Method 3: Representing as escape sequences (e.g., \uXXXX)

This method converts each character to its escape sequence representation. This is useful for embedding Unicode characters directly in strings.

function stringToUnicodeEscapeSequences(str) {
  return str.split('').map(char => `\\u${('0000' + char.charCodeAt(0).toString(16)).slice(-4)}`).join('');
}

let myString = "Hello, world!";
let unicodeEscapeSequences = stringToUnicodeEscapeSequences(myString);
console.log(unicodeEscapeSequences); // Output: \u0048\u0065\u006c\u006c\u006f\u002c\u0020\u0077\u006f\u0072\u006c\u0064\u0021

 

Explanation:

• This function uses split('') to convert the string into an array of individual characters.
• map() iterates over each character, converting its code point to a hexadecimal representation using toString(16). ('0000' + ...).slice(-4) ensures that the hexadecimal representation is always 4 digits long, padding with leading zeros if necessary.
• Finally, join('') concatenates the escape sequences back into a single string. Note that this method doesn't handle supplementary characters optimally; for those, you'd need a more sophisticated approach involving codePointAt() and handling surrogate pairs.

Choose the method that best suits your needs based on how you intend to use the Unicode representation of your string. For most common use cases, Method 2 (using codePointAt()) provides the most robust and accurate solution. Method 3 is useful if you need to represent the string in a format suitable for embedding directly in other code or data.

 

One More Function and Example String Converter Page

 

Function:

function stringToUnicode(str) {
    let unicodeStr = '';
    for (let i = 0; i < str.length; i++) {
        // Get Unicode code point in hexadecimal, pad with zeros
        unicodeStr += '\\u' + str.charCodeAt(i).toString(16).padStart(4, '0');
    }
    return unicodeStr;
}

// Example usage
console.log(stringToUnicode("Hello")); // Outputs: \u0048\u0065\u006c\u006c\u006f
 

 

 Simple Converter Web Page Utilizing the Function:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String to Unicode Converter</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            width: 300px;
            text-align: center;
        }
        input, textarea, button {
            width: 100%;
            margin: 10px 0;
            padding: 8px;
        }
        button {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>String to Unicode Converter</h2>
        <textarea id="stringInput" rows="4" placeholder="Enter string"></textarea>
        <button onclick="convertStringToUnicode()">Convert to Unicode</button>
        <textarea id="unicodeOutput" rows="4" placeholder="Unicode sequence will appear here" readonly></textarea>
        <button onclick="copyUnicode()">Copy</button>
        <button onclick="resetFields()">Reset</button>
    </div>

    <script>
        function convertStringToUnicode() {
            const stringInput = document.getElementById('stringInput').value;
            let unicodeStr = '';
            for (let i = 0; i < stringInput.length; i++) {
                unicodeStr += '\\u' + stringInput.charCodeAt(i).toString(16).padStart(4, '0');
            }
            document.getElementById('unicodeOutput').value = unicodeStr;
        }

        function copyUnicode() {
            const unicodeOutput = document.getElementById('unicodeOutput');
            unicodeOutput.select();
            unicodeOutput.setSelectionRange(0, 99999); // For mobile devices
            document.execCommand('copy');
            alert("Unicode sequence copied to clipboard!");
        }

        function resetFields() {
            document.getElementById('stringInput').value = '';
            document.getElementById('unicodeOutput').value = '';
        }
    </script>
</body>
</html>