Converting a string to a corresponding type in JavaScript

Question

I need to convert a string value to its primitive type in JavaScript. Other values that are not of type String should just be returned.

Example:

1. String '34' should be converted to 34

2. String '34px' should be kept as '34px'

3. true should return true

4. 'true' should return true

Here is a working example (please look at console).

I would like to know:

• If there is any better way to write the same function, in term of performance.
• If I missed some type or any other issues.

function convert(value) {
    var result = value;
    if (typeof value === 'string') {
        // check if it is a empty character
        value.trim();
        if (value.length > 0) {
            if (/\S/.test(value)) {
                if (value === 'true') {
                    result = true;
                } else if (value === 'false') {
                    result = false
                } else if (!isNaN(value)) {
                    result = new Number(value);
                }
            }
        }
    }
    return result;
}

Answer 1

On thing to keep in mind is that certain inputs that you might not consider to be numbers will be considered numbers by the isNaN and Number functions.

Potentially Unexpected Numbers:

• Infinity ("Infinity")
• hexidecimal notation ("0x1a3")
• scientific notation ("0e9" and "0e+9" and "0e-9")

function convert(value) {
    var result = value;
    if (typeof value === 'string') {
        // check if it is a empty character
        value.trim();
        if (value.length > 0) {
            if (/\S/.test(value)) {
                if (value === 'true') {
                    result = true;
                } else if (value === 'false') {
                    result = false
                } else if (!isNaN(value)) {
                    result = new Number(value);
                }
            }
        }
    }
    return result;
}

var rows = document.querySelectorAll(".row");
for(var i = 0; i < rows.length; i++){
  var input = rows[i].querySelector(".in");
  var output = rows[i].querySelector(".out");
  var type = rows[i].querySelector(".type")
  
  var value = input.getAttribute("value");
  if(value){input.innerHTML = "\""+value+"\""}
  
  var result = convert(input.getAttribute("value"));
  output.innerHTML = result
  
  var typeValue = typeof result === "object" ? isNaN(result) ? typeof result : result === null ? "null" : "number" : typeof result;
  type.innerHTML = typeValue;
  if(typeValue === "number"){if(type.classList){type.classList.add("highlight");}else{type.className = type.className + " " + "highlight";}}
}

.table{display:table;border-left:1px solid black;table-layout:fixed; min-width:300px;}
.headerRow{display:table-row;background-color:#dfdfdf;font-weight:bold;}
.headerCell{display:table-cell; border-right:1px solid black; border-bottom:1px solid black; border-top:1px solid black;}
.row{display:table-row;}
.cell{display:table-cell; border-right:1px solid black;border-bottom:1px solid #dfdfdf;}
.highlight{background-color:lightgreen;}

<div class="table">
  <div class="headerRow">
    <div class="headerCell">Input String</div>
    <div class="headerCell">Output Value</div>
    <div class="headerCell">Output Type</div>
  </div>
  <div class="row">
    <div class="in cell"></div>
    <div class="out cell"></div>
    <div class="type cell"></div>
  </div>
  <div class="row">
    <div class="in cell" value=" 9e99 "></div>
    <div class="out cell"></div>
    <div class="type cell"></div>
  </div>
  <div class="row">
    <div class="in cell" value="Infinity"></div>
    <div class="out cell"></div>
    <div class="type cell"></div>
  </div>
  <div class="row">
    <div class="in cell" value="">""</div>
    <div class="out cell"></div>
    <div class="type cell"></div>
  </div>
  <div class="row">
    <div class="in cell" value="0x9"></div>
    <div class="out cell"></div>
    <div class="type cell"></div>
  </div>
  <div class="row">
    <div class="in cell" value="0x1A9"></div>
    <div class="out cell"></div>
    <div class="type cell"></div>
  </div>
  <div class="row">
    <div class="in cell" value="099.90"></div>
    <div class="out cell"></div>
    <div class="type cell"></div>
  </div>
  <div class="row">
   <div class="in cell" value="1e8"></div>
   <div class="out cell"></div>
    <div class="type cell"></div>
  </div>
  <div class="row">
   <div class="in cell" value="true"></div>
   <div class="out cell"></div>
    <div class="type cell"></div>
  </div>
  <div class="row">
   <div class="in cell" value="TRUE"></div>
   <div class="out cell"></div>
    <div class="type cell"></div>
  </div>
  <div class="row">
   <div class="in cell" value="12px"></div>
   <div class="out cell"></div>
    <div class="type cell"></div>
  </div>
  <div class="row">
   <div class="in cell" value="false"></div>
   <div class="out cell"></div>
    <div class="type cell"></div>
  </div>
</div>

Boolean values are also considered numbers, but your function has that covered.