JavaScript String Methods

طول رشته

خصوصیت length طول یک رشته را برمی‌گرداند:

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript String Properties </h2>
    <p> The length property returns the length of a string: </p>
    <p id = "demo"> </p>
    <script>
      var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      var sln = txt.length;
      document.getElementById("demo").innerHTML = sln;
    </script>
  </body>
</html>

خروجی:

پیدا کردن یک رشته داخل یک رشته

تابع شیء indexOf() ایندکس یا همان مکان اولین جایی که متن مشخص شده، در یک رشته روی می‌دهد را برمی‌گرداند:

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript String Methods </h2>
    <p> The indexOf() method returns the position of the first 
      occurrence of a specified text: 
    </p>
    <p id = "demo"> </p>
    <script>
      var str = "Please locate where 'locate' occurs!";
      var pos = str.indexOf("locate");
      document.getElementById("demo").innerHTML = pos;
    </script>
  </body>
</html>

خروجی:

جاوا اسکریپت شمارش ایندکس یا مکان را از صفر شروع می‌کند. یعنی صفر اولین مکان در رشته، یک دومین مکان در رشته است و الی آخر ...

lastIndexOf() مکان آخرین جایی که متن مشخص شده، داخل یک رشته روی می‌دهد را برمی‌گرداند:

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript String Methods </h2>
    <p> The lastIndexOf() method returns the position of the last 
      occurrence of a specified text: 
    </p>
    <p id = "demo"> </p>
    <script>
      var str = "Please locate where 'locate' occurs!";
      var pos = str.lastIndexOf("locate");
      document.getElementById("demo").innerHTML = pos;
    </script>
  </body>
</html>

خروجی:

هر دوی indexOf() و lastIndexOf() در صورتی که متن مشخص شده را پیدا نکنند مقدار 1- را برمی‌گردانند.

همچنین هر دوی آن‌ها پارامتر دومی را به عنوان مکان آغاز جستجو قبول می‌کنند:

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript String Methods </h2>
    <p> The indexOf() method accepts a second parameter as the 
      starting position for the search: 
    </p>
    <p id = "demo"> </p>
    <script>
      var str = "Please locate where 'locate' occurs!";
      var pos = str.indexOf("locate",15);
      document.getElementById("demo").innerHTML = pos;
    </script>
  </body>
</html>

خروجی:

به یاد داشته باشید که تابع شیء lastIndexOf() جستجو را برعکس (از آخر به اول) انجام می‌دهد، به این معنی که اگر پارامتر دوم را برای آن 15 قرار دهید، جستجو را از مکان 15 شروع کرده و به سمت آغاز رشته جستجو می‌کند.

جستجو برای یک رشته داخل یک رشته

تابع شیء search() یک رشته را برای یک مقدار مشخص شده جستجو می‌کند و مکان آن را بر می‌گرداند:

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript String Methods </h2>
    <p> The search() method returns the position of the first 
      occurrence of a specified text in a string: 
    </p>
    <p id = "demo"> </p>
    <script>
      var str = "Please locate where 'locate' occurs!";
      var pos = str.search("locate");
      document.getElementById("demo").innerHTML = pos;
    </script>
  </body>
</html>

خروجی:

احتمالاً این سوال برایتان پیش آمده که تابع indexOf() و search() یکسان هستند؟ هر دو دارای پارامتر ورودی یکسان هستند و مقدار مشابهی را هم برمی‌گردانند؟

اما این دو تابع مشابه نیستند و دارای دو تفاوت اساسی می‌باشند:

تابع شیء search() نمی‌تواند پارامتر ورودی دوم که مکان آغاز جستجو را مشخص می‌کند داشته باشد.
تابع شیء indexOf() نمی‌تواند مقادیر regular expression را به عنوان ورودی دریافت کند.

با regular expression در فصل‌های بعدی بیشتر آشنا خواهید شد.

تابع شیء ()match

در یک رشته به دنبال regular expression داده شده می‌گردد و مطابقت‌های موجود را در یک آرایه را برمی‌گرداند.

<!DOCTYPE html>
<html>
    <body>

        <h2>JavaScript String Search</h2>

        <p>Search a string for "ain":</p>

        <p id="demo"></p>

        <script>
            let text = "The rain in SPAIN stays mainly in the plain"; 
            document.getElementById("demo").innerHTML = text.match(/ain/g);
        </script>

    </body>
</html>

خروجی:

در صورتی که g را از regular expression حذف کنیم این تابع شیء تنها اولین مطابقت را برمی‌گرداند.

تابع شیء ()includes

در صورت که رشته شامل عبارت مشخص شده باشد، true را برمی‌گرداند.

<!DOCTYPE html>
<html>
  <body>

      <h2>JavaScript String Search</h2>

      <p>Check if a string includes "world":</p>

      <p id="demo"></p>

      <p>The includes() method is not supported in Internet Explorer.</p>

      <script>
          let text = "Hello world, welcome to the universe.";
          document.getElementById("demo").innerHTML = text.includes("world");
      </script>

  </body>
</html>

خروجی:

استخراج بخش‌های یک رشته

3 تابع شیء برای استخراج یک بخش از یک رشته وجود دارد:

slice(start, end)
substring(start, end)
substr(start, end)

The slice() Method

این تابع شیء 2 پارامتر ورودی دارد: مکان آغاز و مکان پایان (مکان پایان شامل نمی‌شود). قسمت استخراج شده از رشته به صورت یک رشته جدید ذخیره می‌شود. در مثال زیر قسمتی از رشته، از مکان 7 تا 12 استخراج می‌شود:

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript String Methods </h2>
    <p> The slice() method extract a part of a string and returns 
      the extracted parts in a new string: 
    </p>
    <p id = "demo"> </p>
    <script>
      var str = "Apple, Banana, Kiwi";
      var res = str.slice(7,13);
      document.getElementById("demo").innerHTML = res;
    </script>
  </body>
</html>

خروجی:

اگر پارامتر ورودی منفی باشد، مکان از آخر رشته شمرده می‌شود:

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript String Methods </h2>
    <p> The slice() method extract a part of a string and returns 
      the extracted parts in a new string: 
    </p>
    <p id = "demo"> </p>
    <script>
      var str = "Apple, Banana, Kiwi";
      var res = str.slice(-12,-6);
      document.getElementById("demo").innerHTML = res;
    </script>
  </body>
</html>

خروجی:

اگر پارامتر دوم را ننویسید، از مکان شروع تا آخر رشته استخراج می‌شود. کد زیر را در مثال بالا جایگزین و نتیجه را مشاهده کنید.


        var res = str.slice(7);

اگر پارامتر ورودی منفی باشد، شمارش برعکس انجام می‌شود.


        var res = str.slice(-12);

The substring() Method

مشابه تابع شیء slice() است با این تفاوت که مقادیر منفی را قبول نمی‌کند:

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript String Methods </h2>
    <p> The substring() method extract a part of a string and returns 
      the extracted parts in a new string:
    </p>
    <p id = "demo"> </p>
    <script>
      var str = "Apple, Banana, Kiwi";
      var res = str.substring(7,13);
      document.getElementById("demo").innerHTML = res;
    </script>
  </body>
</html>

خروجی:

The substr() Method

این تابع شیء هم مشابه slice() است با این تفاوت که پارامتر دوم طول قسمت استخراج شده را مشخص می‌کند:

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript String Methods </h2>
    <p> The substr() method extract a part of a string and returns 
      the extracted parts in a new string:
    </p>
    <p id = "demo"> </p>
    <script>
      var str = "Apple, Banana, Kiwi";
      var res = str.substr(7,6);
      document.getElementById("demo").innerHTML = res;
    </script>
  </body>
</html>

خروجی:

جایگزین کردن محتوای یک رشته

تابع شیء replace() مقدار مشخص شده را با مقدار دیگری در رشته جایگزین می‌کند:

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript String Methods </h2>
    <p> Replace "Apple" with "Microsoft" in the paragraph below:</p>
    <button onclick="myFunction()"> Try it!</button>
    <p id ="demo"> Please visit Apple! </p>
    <script>
      function myFunction() {
        var str = document.getElementById("demo").innerHTML;
        var txt = str.replace("Apple","Microsoft");
        document.getElementById("demo").innerHTML = txt;
      }
    </script>
  </body>
</html>

خروجی: روی دکمه زیر کلیک کنید.

JavaScript String Methods

Replace "Apple" with "Microsoft" in the paragraph below:

Please visit Apple!

توجه داشته باشید که replace() رشته‌ای که روی آن فراخوانده شده را تغییر نمی‌دهد و یک رشته جدید را برمی‌گرداند.

به صورت پیش‌فرض تابع شیء replace() فقط اولین مطابقت را جایگزین می‌کند:

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript String Methods </h2>
    <p> Replace "Apple" with "Microsoft" in the paragraph below:</p>
    <button onclick="myFunction()"> Try it!</button>
    <p id = "demo"> Please visit Apple and Apple! </p>
    <script>
      function myFunction() {
        var str = document.getElementById("demo").innerHTML;
        var txt = str.replace("Apple","Microsoft");
        document.getElementById("demo").innerHTML = txt;
      }
    </script>
  </body>
</html>

خروجی: روی دکمه زیر کلیک کنید.

JavaScript String Methods

Replace "Apple" with "Microsoft" in the paragraph below:

Please visit Apple and Apple!

همچنین به صورت پیش‌فرض replace() به بزرگ و کوچک بودن حروف حساس است. و در کد بالا اگر به جای Apple مثلاً بنویسیم APPLE جایگزینی رخ نخواهد داد.

می‌توان با استفاده از regular expression همراه با /i که اول کلمه insensitive است، این تابع شیء را به بزرگ و کوچک بودن حروف غیرحساس کنیم.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript String Methods </h2>
    <p> Replace "Apple" with "Microsoft" in the paragraph below:</p>
    <button onclick="myFunction()"> Try it!</button>
    <p id = "demo"> Please visit Apple! </p>
    <script>
      function myFunction() {
        var str = document.getElementById("demo").innerHTML;
        var txt = str.replace(/APPLE/i,"Microsoft");
        document.getElementById("demo").innerHTML = txt;
      }
    </script>
  </body>
</html>

خروجی: روی دکمه زیر کلیک کنید.

JavaScript String Methods

Replace "Apple" with "Microsoft" in the paragraph below:

Please visit Apple!

همچنین برای جایگزین کردن همه مطابقت‌های موجود از regular expression همراه با /g که اول global match است، استفاده کنید.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript String Methods </h2>
    <p> Replace all occurrences of "Apple" with "Microsoft" in the paragraph below:</p>
    <button onclick="myFunction()"> Try it!</button>
    <p id = "demo"> Please visit Apple! </p>
    <script>
      function myFunction() {
        var str = document.getElementById("demo").innerHTML;
        var txt = str.replace(/Apple/g,"Microsoft");
        document.getElementById("demo").innerHTML = txt;
      }
    </script>
  </body>
</html>

خروجی: روی دکمه زیر کلیک کنید.

JavaScript String Methods

Replace "Apple" with "Microsoft" in the paragraph below:

Please visit Apple and Apple!

در مورد regular expression در فصل Regular Expression بیشتر فرا خواهید گرفت.

تبدیل به حروف بزرگ و کوچک

یک رشته را با استفاده از toUpperCase() می‌توان به حروف بزرگ تبدیل کرد:

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript String Methods </h2>
    <p> Convert string to upper case:</p>
    <button onclick="myFunction()"> Try it!</button>
    <p id = "demo"> Hello World! </p>
    <script>
      function myFunction() {
        var str = document.getElementById("demo").innerHTML;
        document.getElementById("demo").innerHTML = text.toUpperCase();
      }
    </script>
  </body>
</html>

خروجی: روی دکمه زیر کلیک کنید.

JavaScript String Methods

Convert string to upper case:

Hello World!

برای تبدیل یک رشته به حروف کوچک از toLowerCase() استفاده کنید.

The concat() Method

concat() دو یا تعداد بیشتر رشته را به هم متصل می‌کند.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript String Methods </h2>
    <p> The concat() method joins two or more strings:</p>
    <p id = "demo"> </p>
    <script>
      var text1 = "Hello";
      var text2 = "World!";
      var text3 = text1.concat(" ",text2);
      document.getElementById("demo").innerHTML = text3;
    </script>
  </body>
</html>

خروجی:

concat() را می‌توان به جای عملگر جمع استفاده کرد. دو عبارت زیر معادل هم هستند:


        var text = "Hello" + " " + "World!";

        var text = "Hello".concat(" ", "World!");

تمامی توابع رشته یک رشته جدید را برمی‌گرداند. آن‌ها رشته اصلی را تغییر نمی‌دهند.
به عبارت دیگر: رشته‌ها غیرقابل تغییر (immutable) هستند. رشته‌ها تغییر نمی‌کنند، فقط جایگزین می‌شوند.

()String.trim

تابع شیء trim() فاصله‌های خالی را از هر دو طرف رشته پاک می‌کند:

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript String.trim() </h2>
    <p> Click the button to alert the string with removed whitespace. </p>
    <button onclick="myFunction()"> Try it! </button>
    <script>
      function myFunction() {
        var str = " Hello World! ";
        alert(str.trim());
      }
    </script>
  </body>
</html>

خروجی: روی دکمه زیر کلیک کنید.

JavaScript String.trim()

Click the button to alert the string with removed whitespace.

استخراج کاراکترها از رشته

با استفاده از 3 روش می‌توان کاراکترهای یک رشته را استخراج کرد:

charAt(position)
charCodeAt(position)
Property access[]

The charAt() Method

تابع شیء charAt() کاراکتر را در مکان مشخص شده از یک رشته برمی‌گرداند:

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript String Methods </h2>
    <p> The charAt() method returns the character at a given position in a string: </p>
    <p id="demo"> </p>
    <script>
      var str = "HELLO WORLD";
      document.getElementById("demo").innerHTML = str.charAt(0);
    </script>
  </body>
</html>

خروجی:

The charCodeAt() Method

تابع شیء charCodeAt() یونیکد (unicode) کاراکتر را در مکان مشخص شده از یک رشته برمی‌گرداند. (کد UTF-16 را برمی‌گرداند. (عددی صحیح بین 0 و 65535))

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript String Methods </h2>
    <p> The charCodeAt() method returns the unicode of the character at a given position in a string: </p>
    <p id="demo"> </p>
    <script>
      var str = "HELLO WORLD";
      document.getElementById("demo").innerHTML = str.charCodeAt(0);
    </script>
  </body>
</html>

خروجی:

Property access

ECMAScript 5 (2009) امکان دسترسی به خصوصیت [] روی رشته را فراهم آورده است.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript String Methods </h2>
    <p> ECMAScript 5 allows property access on strings: </p>
    <p id="demo"> </p>
    <script>
      var str = "HELLO WORLD";
      document.getElementById("demo").innerHTML = str[0]
    </script>
  </body>
</html>

خروجی:

این روش ممکن است کمی غیرقابل پیش‌بینی باشد:

باعث می‌شود که رشته‌ها مانند آرایه‌ها به نظر آیند در حالیکه چنین نیست.
اگر کاراکتری پیدا نشود، undefined را برمی‌گرداند. در حالیکه charAt() یک رشته خالی را برمی‌گرداند.
فقط خواندنی (read-only) است. str[0] = "A" خطایی را به وجود نمی‌آورد ولی کاری را هم انجام نمی‌دهد.


        var str = "HELLO WORLD";

        str[0] = "A";             // Gives no error, but does not work 

        str[0];                   // returns H

اگر می‌خواهید با رشته‌ها مثل آرایه‌ها کار کنید، آن را به آرایه تبدیل کنید.

تبدیل یک رشته به آرایه

با استفاده از تابع شیء split() یک رشته را می‌توان به آرایه تبدیل کرد.


        var txt = "a,b,c,d,e";   // String 

        txt.split(",");          // Split on commas 

        txt.split(" ");          // Split on spaces 

        txt.split("|");          // Split on pipe

اگر جدا کننده حذف شود، آرایه برگردانده شده شامل کل رشته در ایندکس [0] خواهد بود.

<!DOCTYPE HTML>
<html>
  <body>
    <p> Click "Try it" to display the first array element, after a string split. </p>
    <button onclick="myFunction()"> </button>
    <p id = "demo"> </p>
    <script>
      function myFunction() {
        var str = "a,b,c,d,e,f";
        var arr = str.split(",");
        document.getElementById("demo").innerHTML = arr[4];
      }
    </script>
  </body>
</html>

خروجی: روی دکمه زیر کلیک کنید.

Click "Try it" to display the first array element, after a string split.

اگر جدا کننده "" باشد، آرایه برگردانده شده، آرایه‌ای از کاراکترهای تکی خواهد بود.

<!DOCTYPE HTML>
<html>
  <body>
    <p id = "demo"> </p>
    <script>
      var str = "Hello";
      var arr = str.split("");
      var text = "";
      var i;
      for (i = 0; i < arr.length; i++) {
        text += arr[i] + "<br>"
      }
      document.getElementById("demo").innerHTML = text;
    </script>
  </body>
</html>

خروجی:

برای مشاهده لیست کامل توابع شیء رشته‌ها اینجا را کلیک کنید.

<< مبحث قبلی مبحث بعدی >>