Converting a string to a corresponding type in JavaScript 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:


String '34' should be converted to 34
String '34px' should be kept as '34px'
true should return true
'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 &gt; 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;
}
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 &gt; 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 &lt; 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;}
&lt;div class="table"&gt;
  &lt;div class="headerRow"&gt;
    &lt;div class="headerCell"&gt;Input String&lt;/div&gt;
    &lt;div class="headerCell"&gt;Output Value&lt;/div&gt;
    &lt;div class="headerCell"&gt;Output Type&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="in cell"&gt;&lt;/div&gt;
    &lt;div class="out cell"&gt;&lt;/div&gt;
    &lt;div class="type cell"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="in cell" value=" 9e99 "&gt;&lt;/div&gt;
    &lt;div class="out cell"&gt;&lt;/div&gt;
    &lt;div class="type cell"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="in cell" value="Infinity"&gt;&lt;/div&gt;
    &lt;div class="out cell"&gt;&lt;/div&gt;
    &lt;div class="type cell"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="in cell" value=""&gt;""&lt;/div&gt;
    &lt;div class="out cell"&gt;&lt;/div&gt;
    &lt;div class="type cell"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="in cell" value="0x9"&gt;&lt;/div&gt;
    &lt;div class="out cell"&gt;&lt;/div&gt;
    &lt;div class="type cell"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="in cell" value="0x1A9"&gt;&lt;/div&gt;
    &lt;div class="out cell"&gt;&lt;/div&gt;
    &lt;div class="type cell"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="in cell" value="099.90"&gt;&lt;/div&gt;
    &lt;div class="out cell"&gt;&lt;/div&gt;
    &lt;div class="type cell"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
   &lt;div class="in cell" value="1e8"&gt;&lt;/div&gt;
   &lt;div class="out cell"&gt;&lt;/div&gt;
    &lt;div class="type cell"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
   &lt;div class="in cell" value="true"&gt;&lt;/div&gt;
   &lt;div class="out cell"&gt;&lt;/div&gt;
    &lt;div class="type cell"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
   &lt;div class="in cell" value="TRUE"&gt;&lt;/div&gt;
   &lt;div class="out cell"&gt;&lt;/div&gt;
    &lt;div class="type cell"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
   &lt;div class="in cell" value="12px"&gt;&lt;/div&gt;
   &lt;div class="out cell"&gt;&lt;/div&gt;
    &lt;div class="type cell"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
   &lt;div class="in cell" value="false"&gt;&lt;/div&gt;
   &lt;div class="out cell"&gt;&lt;/div&gt;
    &lt;div class="type cell"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;




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