javascript - html 方法在传递 false 时不输出 "false"

Question

我正在编写一个简单的扩展来验证电子邮件地址，但在处理扩展中的 bool 值时遇到了一些奇怪的行为。

从代码片段中您可以看到 boolOne 和 boolThree，它们应该读为 false，但为空。是否有理由不在 false 时附加“false”，就像“true”一样？

如果我使用String()它就可以工作，所以这就是一个解决方案。

$(document).ready(function (){
    $("#buttonValidate").click(function () {
        $("#boolOne").html($("#emailOne").IsEmail());
        $("#intOne").html(ToInt($("#emailOne").IsEmail()));
        $("#boolTwo").html($("#emailTwo").IsEmail());
        $("#intTwo").html(ToInt($("#emailTwo").IsEmail()));
        $("#boolThree").html($("#emailThree").IsEmail());
        $("#intThree").html(ToInt($("#emailFive").IsEmail()));

        console.log({ One: $("#emailOne").IsEmail() });
        console.log({ Two: $("#emailTwo").IsEmail() });
        console.log({ Three: $("#emailThree").IsEmail() });

        function ToInt(val) {
            let result = 0;

            if (val) {
                result = 1;
            }

            return result;
        }
    });
});

$.fn.IsEmail = function () {
    var result = false;
    var val = this.val();
    var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if (reg.test(val)) {
        result = true;
    }

    return result;
}

p.button-wrap {
  padding: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
        <h1>IsEmail</h1>

        <input type="text" id="emailOne" value="error" /> - bool: <span id="boolOne"></span>, int: <span id="intOne"></span>
        <br />
        <input type="text" id="emailTwo" value="valid@valid.no" /> - bool: <span id="boolTwo"></span>, int: <span id="intTwo"></span>
        <br />
        <input type="text" id="emailThree" value="error@error" /> - bool: <span id="boolThree"></span>, int: <span id="intThree"></span>
        <p class="button-wrap">
            <input type="button" id="buttonValidate" value="Validate" />
        </p>
    </div>

Answer 1

作为解决方法，您可以使用 ""+ boolean 强制将其转换为字符串，这将返回 "false" 而不是 false .

另外，我冒昧地重写了你的代码;)

$(document).ready(function() {
  $("#buttonValidate").click(() => {
    ["One","Two","Three"].forEach( num => {
       let isEmail = $(`#email${num}`).IsEmail()
       $(`#bool${num}`).html("" + isEmail);
       $(`#int${num}`).html(isEmail ? 1 : 0);
    })
  });
});

const reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

$.fn.IsEmail = function() { return reg.test(this.val()) }

p.button-wrap {
  padding: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1>IsEmail</h1>

  <input type="text" id="emailOne" value="error" /> - bool: <span id="boolOne"></span>, int: <span id="intOne"></span>
  <br />
  <input type="text" id="emailTwo" value="valid@valid.no" /> - bool: <span id="boolTwo"></span>, int: <span id="intTwo"></span>
  <br />
  <input type="text" id="emailThree" value="error@error" /> - bool: <span id="boolThree"></span>, int: <span id="intThree"></span>
  <p class="button-wrap">
    <input type="button" id="buttonValidate" value="Validate" />
  </p>
</div>