JavaScript 字符串原型属性

JavaScript 字符串原型属性

在JavaScript中,每个对象都有自己的属性,并且每个对象都包含prototype属性。字符串也是 JavaScript 中的一个对象。因此,它还包含原型属性。

原型属性嵌套在对象中,这意味着每个原型属性都包含另一个原型属性。字符串对象的原型属性包含默认方法和属性。但是,开发人员可以自定义原型属性,并向字符串原型添加方法和属性。

在本教程中,我们将学习使用字符串原型属性的方法并自定义它们。

语法

用户可以按照以下语法向字符串原型属性添加任何方法。

String.prototype.method_name = function () {
   // function code
};

在上面的语法中,method_name应该是我们要添加到字符串原型的方法的名称。

示例 1(使用 toUpperCase() 和 toLowerCase() 方法)

在下面的示例中,我们使用了字符串原型属性的 toUpperCase() 和 toLowerCase() 方法,分别将字符串转换为大写和小写。

在输出中,用户可以观察结果字符串。

<html>
<body>
   <h3> Using the <i> toUpperCase() and toLowerCase() </i> methods of string prototype property to customize the strings </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      var str = "Hello readers! This string contains uppercase and lowerCase letters.";
      var res = str.toUpperCase();
      var res1 = str.toLowerCase();
      output.innerHTML = "Original string: " + str + "<br>" + "Uppercase string: " + res + "<br>" + "Lowercase string: " +
      res1;
   </script>
</body>
</html>

示例 2(使用 Length 属性)

在下面的示例中,我们演示了如何使用字符串原型属性的默认属性。在这里,我们使用“length”属性来计算字符串中的字符总数。

在输出中,我们可以看到我们使用 length 属性计算出的字符串的总字符数或长度。

<html>
<body>
   <h3> Using the <i> length </i> property of the string prototype property to get the length of the string </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      let string = "JavaScript string contains prototype property.";
      let len = string.length;;
      output.innerHTML = "The original string is: " + string + "<br><br>";
      output.innerHTML += "The length of the string is: " + len;
   </script>
</body>
</html>

示例 3(向字符串原型添加方法)

我们还可以向字符串原型属性添加自定义方法。在这里,我们在字符串原型中添加了 countWords() 属性,该属性计算字符串中的单词总数并返回其值。

这里,我们使用“”作为分隔符分割字符串,并计算结果数组的长度以计算字符串中的单词总数。在代码中,我们可以看到,我们可以像其他字符串方法一样,以任意字符串作为引用来执行 countWords() 方法。

<html>
<body>
   <h3> Adding the <i> countWords() method to the </i> string prototype property </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      // adding countWords() method to string prototype property.
      String.prototype.countWords = function () {
      return this.split(" ").length;
      };
      let string1 = "This is a string";
      let string2 = "Hey, do you know how many words are there in this string?";

      output.innerHTML = "The number of words in the string '" + string1 + "' is " + string1.countWords() + "<br>";
      output.innerHTML += "The number of words in the string '" + string2 + "' is " + string2.countWords();
   </script>
</body>
</html>

示例4(自定义字符串原型的默认方法)

在此示例中,我们演示了如何自定义字符串原型的默认方法。在这里,我们自定义了 toUpperCase() 方法。一般情况下,toUpperCase()方法会返回将所有字符串字符转为大写后的字符串。

我们已将其自定义为仅将第一个字符转换为大写后返回字符串。在这里,如果第一个字符已经是大写,我们将返回相同的字符串。否则,我们使用 ASCII 值将第一个字符转换为大写。

在输出中,我们可以看到 toUpperCase() 方法仅将字符串的第一个字符转换为大写,而不是整个字符串转换为大写。

<html>
<body>
   <h3> Customizing the <i> toUpperCase() method of the </i> string prototype property </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      
      //  Customizing the toUpperCase() method of the string prototype property to capitalize only the first character
      String.prototype.toUpperCase = function () {
         if (this.charCodeAt(0) >= 97 && this.charCodeAt(0) <= 122) {
         
            // convert to uppercase
            let ascii = this.charCodeAt(0) - 32;
            return String.fromCharCode(ascii) + this.slice(1);
         } else {
            return this;
         }
      }
      let str = "first letter of this string should be capitalized";
      output.innerHTML = "Original string: " + str + "<br>" + "Capitalized string: " + str.toUpperCase();
   </script>
</body>
</html>

用户学会了使用字符串原型属性。我们可以使用它向字符串对象添加方法和属性。此外,我们还可以使用它来自定义字符串属性和方法。在字符串原型中添加方法后,我们就可以以字符串为引用来调用方法了。

以上就是JavaScript 字符串原型属性的详细内容,更多请关注编程之家其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)