首頁 > web前端 > js教程 > 主體

JavaScript 字串原型屬性

WBOY
發布: 2023-09-01 10:49:02
轉載
983 人瀏覽過

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 字串原型屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!