{"id":1999,"date":"2017-03-24T11:20:48","date_gmt":"2017-03-24T05:50:48","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=1999"},"modified":"2017-03-28T16:44:16","modified_gmt":"2017-03-28T11:14:16","slug":"check-empty-string-javascript","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/check-empty-string-javascript\/","title":{"rendered":"[ Solved &#8211; 12 Answers ] JAVASCRIPT &#8211; How to check for an empty string in JavaScript"},"content":{"rendered":"<p><label class=\"label label-Warning\">PROBLEM<\/label><\/p>\n<ul>\n<li>How to check for an empty string in JavaScript<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">javascript null is-empty<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 1:<\/label><\/p>\n<ul>\n<li>If we need to check whether there&#8217;s any value in string,<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">if (strValue) {<br\/>    \/\/do something<br\/>}<\/code><\/pre> <\/div>\n<ul>\n<li style=\"top: 90px;\">If we need to check specifically for an empty string over null, we would think checking against &#8220;&#8221; is our best, using the === operator (In fact, a string we are comparing against).<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">if (!a) {<br\/>  \/\/ is emtpy<br\/>}<\/code><\/pre> <\/div>\n<ul>\n<li>To ignore white space for strings:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">if (!a.trim()) {<br\/>    \/\/ is empty or whitespace<br\/>}<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<ul>\n<li>If we need legacy support (IE8-) for trim(), use $.trim or a polyfill.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 3:<\/label><\/p>\n<ul>\n<li>check if the variable has a truthy value or not. That means<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">if( value ) {<br\/>}<\/code><\/pre> <\/div>\n<p style=\"top: 90px;\">will evaluate to true if value is not:<\/p>\n<ul>\n<li>null<\/li>\n<li>undefined<\/li>\n<li>NaN<\/li>\n<li>empty string (&#8220;&#8221;)<\/li>\n<li>0<\/li>\n<li>false<\/li>\n<\/ul>\n<p>The above list represents all possible false values in ECMA-\/Javascript. Find it in the specification at the ToBoolean section.<br \/>\nFurthermore, if we do not know whether a variable exists (that means, if it was declared) then we should check with the typeof operator. For instance<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">if( typeof wiki!== &#039;undefined&#039; ) {<br\/>    \/\/ wiki could get resolved and it&#039;s defined<br\/>}<\/code><\/pre> <\/div>\n<ul>\n<li style=\"top: 90px;\">Make sure that a variable is declared at least, we should directly check if it has a truthy value<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">function isEmpty(str) {<br\/>    return (!str || 0 === str.length);<br\/>}<\/code><\/pre> <\/div>\n<ul>\n<li>If a string is blank, null or undefined then we can use the following:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">function isBlank(str) {<br\/>    return (!str || \/^\\s*$\/.test(str));<br\/>}<\/code><\/pre> <\/div>\n<ul>\n<li style=\"top: 90px;\">If a string is blank or contains only white-space:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">String.prototype.isEmpty = function() {<br\/>    return (this.length === 0 || !this.trim());<br\/>};<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 5:<\/label><\/p>\n<ul>\n<li>Using !!(not not) operator:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">if(!!str){<br\/>some code here;<br\/>}<\/code><\/pre> <\/div>\n<p style=\"top: 90px;\">or<\/p>\n<h4 id=\"using-type-casting\"><strong><span style=\"color: #808000;\">Using type casting:<\/span><\/strong><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">if(Boolean(str)){<br\/>    codes here;<br\/>}<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<ul>\n<li>Both do the same function, type cast the variable to boolean, where str is a variable.<\/li>\n<li>Returns false for null,undefined,0,000,&#8221;&#8221;,false.<\/li>\n<li>Returns true for string &#8220;0&#8221; and whitespace &#8221; &#8220;.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<ul>\n<li>Make sure that the string is not just a bunch of empty spaces (we are assuming this is for form validation) we need to replace on the spaces.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">if(str.replace(\/\\s\/g,&quot;&quot;) == &quot;&quot;){<br\/>}<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 7:<\/label><\/p>\n<ul>\n<li>We can use the following Solution:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">function empty(e) {<br\/>  switch (e) {<br\/>    case &quot;&quot;:<br\/>    case 0:<br\/>    case &quot;0&quot;:<br\/>    case null:<br\/>    case false:<br\/>    case typeof this == &quot;undefined&quot;:<br\/>      return true;<br\/>    default:<br\/>      return false;<br\/>  }<br\/>}<br\/><br\/>empty(null) \/\/ true<br\/>empty(0) \/\/ true<br\/>empty(7) \/\/ false<br\/>empty(&quot;&quot;) \/\/ true<br\/>empty((function() {<br\/>    return &quot;&quot;<br\/>  })) \/\/ true<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 8:<\/label><\/p>\n<ul>\n<li>Several methods:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">\/\/when undefined<br\/>if (typeof MyVariable == &#039;undefined&#039;)<br\/><br\/>\/\/when false<br\/>if (MyVariable == false) \/\/same as if(!MyVariable )<br\/><br\/>\/\/when defined, but empty<br\/>if (<br\/>    (MyVariable.length == 0)<br\/>                ||<br\/>    (MyVariable == &quot;&quot;)<br\/>                ||<br\/>    (MyVariable.replace(\/\\s\/g,&quot;&quot;) == &quot;&quot;)<br\/>                ||<br\/>    (!\/[^\\s]\/.test(MyVariable))<br\/>                ||<br\/>    (\/^\\s*$\/.test(MyVariable))<br\/>   )<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 9:<\/label><\/p>\n<ul>\n<li>Here we can use the regexps:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">if((\/^\\s*$\/).test(str)) { }<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<ul>\n<li style=\"top: 90px;\">Checks for strings that are either empty or filled with whitespace.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 10:<\/label><\/p>\n<ul>\n<li>For example, if we have a null character string:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">var y = &quot;\\0&quot;; \/\/ an empty string, but has a null character<br\/>(y === &quot;&quot;) \/\/ false, testing against an empty string does not work<br\/>(y.length === 0) \/\/ false<br\/>(y) \/\/ true, this is also not expected<br\/>(y.match(\/^[\\s]*$\/)) \/\/ false, again not wanted<\/code><\/pre> <\/div>\n<ul>\n<li>To test its nullness, we can do the following:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">String.prototype.isNull = function(){ <br\/>  return Boolean(this.match(\/^[\\0]*$\/)); <br\/>}<br\/>...<br\/>&quot;\\0&quot;.isNull() \/\/ true<\/code><\/pre> <\/div>\n<p style=\"top: 90px;\">It works on a null string, and on an empty string and it is accessible for all strings. In addition, it could be expanded to contain other JavaScript empty or whitespace characters (i.e. nonbreaking space, byte order mark, line\/paragraph separator, etc.).<\/p>\n<p><label class=\"label label-info\">SOLUTION 11:<\/label><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">\t<br\/><br\/>function isBlank(pString){<br\/>    if (!pString || pString.length == 0) {<br\/>        return true;<br\/>    }<br\/>    \/\/ checks for a non-white space character <br\/>    \/\/ which I think [citation needed] is faster <br\/>    \/\/ than removing all the whitespace and checking <br\/>    \/\/ against an empty string<br\/>    return !\/[^\\s]+\/.test(pString);<br\/>}<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 12:<\/label><\/p>\n<ul>\n<li>Starting with:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">return (!value || value == undefined || value == &quot;&quot; || value.length == 0);<\/code><\/pre> <\/div>\n<ul>\n<li style=\"top: 90px;\">Looking at the last condition, if value == &#8220;&#8221;, it&#8217;s length MUST be 0. Therefore drop it:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">return (!value || value == undefined || value == &quot;&quot;);<\/code><\/pre> <\/div>\n<ul>\n<li>In JS, an empty string is false. Therefore, drop value == &#8220;&#8221;:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">return (!value || value == undefined);<\/code><\/pre> <\/div>\n<ul>\n<li style=\"top: 90px;\">And !undefined is true, so that check isn&#8217;t needed. So we have:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">return (!value);<\/code><\/pre> <\/div>\n<ul>\n<li style=\"top: 90px;\">And we don&#8217;t need parentheses:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">return !value<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM How to check for an empty string in JavaScript SOLUTION 1: If we need to check whether there&#8217;s any value in string, If we need to check specifically for an empty string over null, we would think checking against &#8220;&#8221; is our best, using the === operator (In fact, a string we are comparing [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[275],"tags":[4265,4273,4268,4258,4267,4262,4257,4269,4271,4274,4270,4275,4256,4272,4276,4266,4260,4263,4255,4261,4264,4259],"class_list":["post-1999","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-1-6-checking-for-an-existing","tag-check-if-string-is-empty-java","tag-how-to-check-if-javascript-object-is-empty-example","tag-is-there-a-standard-function-to-check-for-null","tag-isnan-javascript","tag-javascript-falsy-values-vs-null","tag-javascript-what-is-the-best-way-to-test-for-an-empty-string-with-jquery","tag-javascript-check-for-null-or-empty-string","tag-javascript-check-if-string-is-empty-or-whitespace","tag-javascript-create-empty-string","tag-javascript-is-empty-array","tag-javascript-is-empty-object","tag-javascript-how-to-check-if-a-string-is-empty","tag-jquery-empty-string","tag-lodash-empty-string","tag-nonempty-string","tag-or-blank","tag-or-empty-string","tag-related-queries-null-how-do-you-check-for-an-empty-string-in-javascript","tag-string-isnullorempty-in-javascript","tag-test-for-empty-values-in-javascript","tag-undefined"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1999","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=1999"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1999\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=1999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=1999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=1999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}