澄清 - String.prototype中的自定义方法

时间:2018-03-30 08:18:49

标签: javascript prototype

我正在尝试使用String.proptotype添加一个自定义方法来比较字符串。请查看以下代码

 String.prototype.compare = function(val) {
        return this === val;
 }

我比较两个值是等于与否。请看下面的代码段。



function getSelectValue() {
         var selectedValue = document.getElementById("dropdownList").value;
         if(selectedValue==="stackoverflow") {
              document.getElementById("name").value = "Stack Overflow";
         } else {
              document.getElementById("name").value = "Stack Community";
         }
 }

<select id="dropdownList" name="dropdownList" onchange="getSelectValue();">
    <option value="stackoverflow">overflow</option>
    <option value="stackcommunity">Community</option>
</select>
<input type="text" id="name" value="" disabled> 
&#13;
&#13;
&#13;

以上代码段工作正常并比较所选值并在文本框中显示。我尝试使用自定义方法selectedValue==="stackoverflow"更改行compare,然后它无效。它总是属于其他部分。请看下面的代码段。

&#13;
&#13;
function getSelectValue() {
        String.prototype.compare = function(val) {
              return this === val;
        }
        var selectedValue = document.getElementById("dropdownList").value;
        if(selectedValue.compare("stackoverflow")) {
            document.getElementById("name").value = "Stack Overflow";
        } else {
            document.getElementById("name").value = "Stack Community";
        }
 }
&#13;
<select id="dropdownList" name="dropdownList" onchange="getSelectValue();">
      <option value="stackoverflow">overflow</option>
      <option value="stackcommunity">Community</option>
</select>
<input type="text" id="name" value="" disabled> 
&#13;
&#13;
&#13;

不确定我在这里做错了什么?请澄清。

5 个答案:

答案 0 :(得分:1)

使用this.valueOf这代表整个String对象,您需要比较其值

String.prototype.compare = function(val) {
      return this.valueOf() === val;
}

<强>演示

function getSelectValue() {
        String.prototype.compare = function(val) {
              return this.valueOf() === val;
        }
        var selectedValue = document.getElementById("dropdownList").value;
        if(selectedValue.compare("stackoverflow")) {
            document.getElementById("name").value = "Stack Overflow";
        } else {
            document.getElementById("name").value = "Stack Community";
        }
 }
<select id="dropdownList" name="dropdownList" onchange="getSelectValue();">
      <option value="stackoverflow">overflow</option>
      <option value="stackcommunity">Community</option>
</select>
<input type="text" id="name" value="" disabled>

答案 1 :(得分:1)

使用this.toString()进行比较。

&#13;
&#13;
function getSelectValue() {
        String.prototype.compare = function(val) {
                      return this.toString() === val;
        }
        var selectedValue = document.getElementById("dropdownList").value;
        if(selectedValue.compare("stackoverflow")) {
            document.getElementById("name").value = "Stack Overflow";
        } else {
            document.getElementById("name").value = "Stack Community";
        }
 }
&#13;
<select id="dropdownList" name="dropdownList" onchange="getSelectValue();">
      <option value="stackoverflow">overflow</option>
      <option value="stackcommunity">Community</option>
</select>
<input type="text" id="name" value="" disabled>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

字符串在控制台中显示如下:

enter image description here

并且它不等于&#34; stackoverflow&#34;。我想你需要调用&#34; .toString()&#34;或某事来实现这一目标。

&#13;
&#13;
function getSelectValue() {
  String.prototype.compare = function(val) {
    return this.toString() === val;
  }
  var selectedValue = document.getElementById("dropdownList").value;
  if (selectedValue.compare("stackoverflow")) {
    document.getElementById("name").value = "Stack Overflow";
  } else {
    document.getElementById("name").value = "Stack Community";
  }
}
&#13;
<select id="dropdownList" name="dropdownList" onchange="getSelectValue();">
      <option value="stackoverflow">overflow</option>
      <option value="stackcommunity">Community</option>
</select>
<input type="text" id="name" value="" disabled>
&#13;
&#13;
&#13;

答案 3 :(得分:1)

除了给定的答案之外,值得一提的还有身份运算符===

因为它需要将两个值计算为相同的类型,否则它将返回false,而是可以使用相等的运算符==

他们的主要区别在于,如果需要,==会进行类型转换,并且在这种情况下将是另一种选择。

Stack snippet

&#13;
&#13;
function getSelectValue() {
        String.prototype.compare = function(val) {
              return this == val;
        }
        var selectedValue = document.getElementById("dropdownList").value;
        if(selectedValue.compare("stackoverflow")) {
            document.getElementById("name").value = "Stack Overflow";
        } else {
            document.getElementById("name").value = "Stack Community";
        }
 }
&#13;
<select id="dropdownList" name="dropdownList" onchange="getSelectValue();">
      <option value="stackoverflow">overflow</option>
      <option value="stackcommunity">Community</option>
</select>
<input type="text" id="name" value="" disabled>
&#13;
&#13;
&#13;

答案 4 :(得分:1)

考虑:

&#13;
&#13;
a = new String('foo');
b = new String('foo');

console.log(a === b);       // false
console.log(a === "foo");   // false
&#13;
&#13;
&#13;

这两个日志都是false,因为当您使用===时,

  1. 两个对象永远不会彼此相等
  2. 原语(如"foo")永远不等于对象
  3. 当你像你一样定义equals时,由于同样的原因,它永远不会返回true:如果另一个值是一个对象,则规则#1适用,如果它是一个文字字符串, #2适用。

    &#13;
    &#13;
    String.prototype.equals = function(other) {
      return this === other;
    }
    
    a = new String('foo');
    b = new String('foo');
    
    console.log(a.equals(b));      // false
    console.log(a.equals("foo"));  // false
    &#13;
    &#13;
    &#13;

    定义String.equals的更好方法是检查其他值的类型并采取不同的操作,具体取决于类型:

    • 如果other是字符串基元,则将this降级为基元并进行比较
    • 如果other是String对象,则降级thisother,并进行比较
    • 否则,返回false。或者,您可能希望添加一些逻辑来将字符串与数字进行比较或将空字符串与空值进行比较。

    &#13;
    &#13;
    String.prototype.equals = function (other) {
    
        if (typeof other === 'string')
            return String(this) === other;
    
        if (other instanceof String)
            return String(this) === String(other);
    
        return false;
    }
    
    a = new String('foo');
    b = new String('foo');
    
    console.log(a.equals(b));      // true
    console.log(a.equals('foo'));  // true
    &#13;
    &#13;
    &#13;

    在这种形式下,我们的String.equals甚至开始变得有用,因为

    • ===不同,它可以比较字符串基元和字符串对象
    • ==不同,它并不依赖于Javascript的模糊强制规则

    希望这有帮助。