閱讀(1.5k) 書簽贊(0) 我要糾錯(cuò)

Useful string methods

2018-05-15 17:26 更新

先決條件:	基本的計(jì)算機(jī)素養(yǎng)，基本了解HTML和CSS，了解JavaScript是什么。
目的:	要理解字符串是對象，并學(xué)習(xí)如何使用這些對象上可用的一些基本方法來操作字符串。

字符串作為對象

我們之前已經(jīng)說過，我們會再說一遍 - 是JavaScript中的一個(gè)對象。當(dāng)您創(chuàng)建字符串時(shí)，例如通過使用

var string = 'This is my string';

你的變量成為一個(gè)字符串對象實(shí)例，因此有大量的屬性和方法可用。如果您轉(zhuǎn)到 字符串 / a>對象頁面，并向下看頁面上的列表！

現(xiàn)在，在你的大腦開始融化之前，不要擔(dān)心！在你的學(xué)習(xí)之旅中，你真的不需要了解大部分時(shí)間。但有一些，你可能會經(jīng)常使用，我們會看看這里。

讓我們在一個(gè)新的控制臺中輸入一些例子。我們在下面提供了一個(gè)(您也可以 >在單獨(dú)的標(biāo)簽或窗口中打開此控制臺，或者如果愿意，可以使用瀏覽器開發(fā)者控制臺)。

Hidden code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript console</title>
    <style>
      * {
        box-sizing: border-box;
      }

      html {
        background-color: #0C323D;
        color: #809089;
        font-family: monospace;
      }

      body {
        max-width: 700px;
      }

      p {
        margin: 0;
        width: 1%;
        padding: 0 1%;
        font-size: 16px;
        line-height: 1.5;
        float: left;
      }

      .input p {
        margin-right: 1%;
      }

      .output p {
        width: 100%;
      }

      .input input {
        width: 96%;
        float: left;
        border: none;
        font-size: 16px;
        line-height: 1.5;
        font-family: monospace;
        padding: 0;
        background: #0C323D;
        color: #809089;
      }

      div {
        clear: both;
      }

    </style>
  </head>
  <body>

    
  </body>

  <script>
    var geval = eval;
    function createInput() {
      var inputDiv = document.createElement('div');
      var inputPara = document.createElement('p');
      var inputForm = document.createElement('input');

      inputDiv.setAttribute('class', 'input');
      inputPara.textContent = '>';
      inputDiv.appendChild(inputPara);
      inputDiv.appendChild(inputForm);
      document.body.appendChild(inputDiv);

      inputForm.addEventListener('change', executeCode);
    }

    function executeCode(e) {
      try {
        var result = geval(e.target.value);
      } catch(e) {
        var result = 'error — ' + e.message;
      }

      var outputDiv = document.createElement('div');
      var outputPara = document.createElement('p');

      outputDiv.setAttribute('class','output');
      outputPara.textContent = 'Result: ' + result;
      outputDiv.appendChild(outputPara);
      document.body.appendChild(outputDiv);

      e.target.disabled = true;
      e.target.parentNode.style.opacity = '0.5';

      createInput()
    }
    
    createInput();

  </script>
</html>

查找字符串的長度

這很簡單 - 您只需使用 length 屬性。嘗試輸入以下行:

var browserType = 'mozilla';
browserType.length;

這很簡單 - 您只需使用 length 屬性。嘗試輸入以下行:...

檢索特定的字符串字符

在相關(guān)說明中，您可以使用方括號符號返回字符串中的任何字符 - 這意味著在變量名稱的末尾包含方括號( [] ) 。在方括號內(nèi)包括您要返回的字符的編號，例如，檢索您要執(zhí)行的第一個(gè)字母:

browserType[0];

計(jì)算機(jī)從0計(jì)數(shù)，而不是1！要檢索任何字符串的最后一個(gè)字符，我們可以使用以下行，將此技術(shù)與上面查看的 length 屬性結(jié)合使用:

browserType[browserType.length-1];

"mozilla"的長度是7，但是因?yàn)橛?jì)數(shù)從0開始，字符位置是6，因此我們需要 length-1 。例如，您可以使用它來查找一系列字符串的第一個(gè)字母，并按字母順序排列。

在字符串中查找子字符串并提取它

Sometimes you'll want to find if a smaller string is present inside a larger one (we generally say if a substring is present inside a string). This can be done using the indexOf() method, which takes a single parameter — the substring you want to search for. Try this:
```
browserType.indexOf('zilla');
```
This gives us a result of 2, because the substring "zilla" starts at position 2?(0, 1, 2??— so 3?characters in) inside "mozilla". Such code could be used to filter strings.?For example, say we have a list?of web addresses and only want to?print out the ones that contain "mozilla".

This can be done in another way, which is possibly even more effective. Try the following:
```
browserType.indexOf('vanilla');
```
This should give you a result of -1 — this is returned when the substring, in this case 'vanilla', is not found in the main string.

You could use this to find all instances of strings that don't contain the substring 'mozilla', or do, if you use the negation operator, as shown below. You could do something like this:
```
if(browserType.indexOf('mozilla') !== -1) {
  // do stuff with the string
}
```
When you know where a substring starts inside a string, and you know at which character you want it to end,?slice() can be used to extract it. Try the following:
```
browserType.slice(0,3);
```
This returns "moz" — the first parameter is the character position to start extracting at, and the second parameter is the character position after the last one to be extracted. So the slice happens from the first position, up to, but not including, the last position.
?
Also, if you know that you want to extract all?of the?remaining characters in a string after a certain character, you don't have to include the second parameter, rather, you only need to include the character position from where you want to extract the remaining characters in a string. Try the following:
```
browserType.slice(2);
```
This returns "zilla" — this is because the character position of 2 is the letter z, and because you didn't include a second parameter, the substring that was returned was all of the remaining characters in the string.?

注意: slice()的第二個(gè)參數(shù)是可選的:如果不包括它，片段將在原始字符串的末尾結(jié)束。還有其他選擇; 請研究 slice() 頁面，看看你能找到什么。

更改案例

字符串方法 toLowerCase() >和 toUpperCase() 取字符串，并將所有字符分別轉(zhuǎn)換為大寫或小寫。例如，如果要在將所有用戶輸入的數(shù)據(jù)存儲在數(shù)據(jù)庫中之前對其進(jìn)行規(guī)范化，這可能非常有用。

讓我們嘗試輸入以下行，看看會發(fā)生什么:

var radData = 'My NaMe Is MuD';
radData.toLowerCase();
radData.toUpperCase();

更新字符串的部分

您可以使用 將字符串中的一個(gè)子字符串替換為另一個(gè)子字符串， replace() 方法。這在一個(gè)基本層面非常簡單，雖然有一些先進(jìn)的東西，你可以做它，我們不會進(jìn)入。

它需要兩個(gè)參數(shù) - 要替換的字符串，以及要替換的字符串。試試這個(gè)例子:

browserType.replace('moz','van');

主動學(xué)習(xí)示例

在本節(jié)中，我們將讓你嘗試處理一些字符串操作代碼。在下面的每個(gè)練習(xí)中，我們有一個(gè)字符串?dāng)?shù)組和一個(gè)循環(huán)，處理數(shù)組中的每個(gè)值，并將其顯示在項(xiàng)目符號列表中。你現(xiàn)在不需要理解數(shù)組或循環(huán) - 這些將在以后的文章中解釋。在每種情況下，你需要做的是編寫將以我們想要的格式輸出字符串的代碼。

每個(gè)示例都有一個(gè)重置按鈕，您可以使用它來重置代碼，如果你犯了一個(gè)錯(cuò)誤，無法讓它再次工作，并顯示解決方案按鈕你可以按看到一個(gè)潛在的答案，如果你真的卡住了。

過濾問候消息

在第一個(gè)練習(xí)中，我們將從簡單的開始 - 我們有一個(gè)賀卡消息的數(shù)組，但我們要排序他們只列出圣誕節(jié)消息。我們希望您在 if(...)結(jié)構(gòu)中填寫一個(gè)條件測試，以測試每個(gè)字符串，并且只在圣誕節(jié)消息中將其打印在列表中。

First think about how you could test whether the message in each case is a Christmas message. What string is present in all of those messages, and what method could you use to test whether it is present?
You'll then need to write a conditional test of the form operand1 operator operand2. Is the thing on the left equal to the thing on the right? Or in this case, does the method call on the left return the result on the right?
Hint: In this case it is probably more useful to test whether the method call isn't equal to a certain result.

Playable code

<div class="output" style="min-height: 125px;">

<ul>

</ul>

</div>

<textarea id="code" class="playable-code" style="height: 290px;">
var list = document.querySelector('.output ul');
list.innerHTML = '';
var greetings = ['Happy Birthday!',
                 'Merry Christmas my love',
                 'A happy Christmas to all the family',
                 'You\'re all I want for Christmas',
                 'Get well soon'];

for (var i = 0; i < greetings.length; i++) {
  var input = greetings[i];
  // Your conditional test needs to go inside the parentheses
  // in the line below, replacing what's currently there
  if (greetings[i]) {
    var result = input;
    var listItem = document.createElement('li');
    listItem.textContent = result;
    list.appendChild(listItem);
  }
}
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var code = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  updateCode();
});

solution.addEventListener('click', function() {
  textarea.value = jsSolution;
  updateCode();
});

var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar greetings = [\'Happy Birthday!\',\n                 \'Merry Christmas my love\',\n                 \'A happy Christmas to all the family\',\n                 \'You\\\'re all I want for Christmas\',\n                 \'Get well soon\'];\n\nfor(var i = 0; i < greetings.length; i++) {\n  var input = greetings[i];\n  if(greetings[i].indexOf(\'Christmas\') !== -1) {\n    var result = input;\n    var listItem = document.createElement(\'li\');\n    listItem.textContent = result;\n    list.appendChild(listItem);\n  }\n}';

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

固定大寫

在這個(gè)練習(xí)中，我們有英國城市的名字，但資本化都被搞砸了。我們希望您更改它們，使它們都是小寫字母，除了首字母大寫。一個(gè)很好的方法是:

Convert the whole of the string contained in the input variable to lower case and store it in a new variable.
Grab the first letter of the string in this new variable and store it in another variable.
Using this latest variable as a substring, replace the first letter of the lowercase string with the first letter of the lowercase string changed to upper case. Store the result of this replace procedure in another new variable.
Change the value of the result variable to equal to the final result, not the input.

注意:提示 - 字符串方法的參數(shù)不必是字符串字面量; 它們也可以是變量，或者甚至是在其上調(diào)用方法的變量。

Playable code 2

<div class="output" style="min-height: 125px;">

<ul>

</ul>

</div>

<textarea id="code" class="playable-code" style="height: 250px;">
var list = document.querySelector('.output ul');
list.innerHTML = '';
var cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];
for(var i = 0; i < cities.length; i++) {
  var input = cities[i];
  // write your code just below here

  var result = input;
  var listItem = document.createElement('li');
  listItem.textContent = result;
  list.appendChild(listItem);
}
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var code = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  updateCode();
});

solution.addEventListener('click', function() {
  textarea.value = jsSolution;
  updateCode();
});

var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];\n\nfor(var i = 0; i < cities.length; i++) {\n  var input = cities[i];\n  var lower = input.toLowerCase();\n  var firstLetter = lower.slice(0,1);\n  var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n  var result = capitalized;\n  var listItem = document.createElement(\'li\');\n  listItem.textContent = result;\n  list.appendChild(listItem);\n\n}';

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

從舊零件創(chuàng)建新字符串

在最后一個(gè)練習(xí)中，數(shù)組包含一串字符串，包含關(guān)于英格蘭北部火車站的信息。字符串是包含三個(gè)字母站代碼的數(shù)據(jù)項(xiàng)，后面是一些機(jī)器可讀數(shù)據(jù)，后面是分號，后面是人工可讀的站名。例如:

MAN675847583748sjt567654;Manchester Piccadilly

我們要提取站的代碼和名稱，并將它們放在一個(gè)字符串中，具有以下結(jié)構(gòu):

MAN: Manchester Piccadilly

我們要提取站的代碼和名稱，并將它們放在一個(gè)字符串中，具有以下結(jié)構(gòu):...

Extract the three-letter station code and store it in a new variable.
Find the character index number of the semi-colon.
Extract the human-readable station name using the semi-colon character index number as a reference point, and store it in a new variable.
Concatenate the two new variables and a string literal to make the final string.
Change the value of the result variable to equal to the final string, not the input.

Playable code 3

<div class="output" style="min-height: 125px;">

<ul>

</ul>

</div>

<textarea id="code" class="playable-code" style="height: 285px;">
var list = document.querySelector('.output ul');
list.innerHTML = '';
var stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
                'GNF576746573fhdg4737dh4;Greenfield',
                'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',
                'SYB4f65hf75f736463;Stalybridge',
                'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];

for (var i = 0; i < stations.length; i++) {
  var input = stations[i];
  // write your code just below here   

  var result = input;
  var listItem = document.createElement('li');
  listItem.textContent = result;
  list.appendChild(listItem);
}
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var code = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  updateCode();
});

solution.addEventListener('click', function() {
  textarea.value = jsSolution;
  updateCode();
});

var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',\n                \'GNF576746573fhdg4737dh4;Greenfield\',\n                \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',\n                \'SYB4f65hf75f736463;Stalybridge\',\n                \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];\n\nfor(var i = 0; i < stations.length; i++) {\n  var input = stations[i];\n  var code = input.slice(0,3);\n  var semiC = input.indexOf(\';\');\n  var name = input.slice(semiC + 1);\n  var final = code + \': \' + name;\n  var result = final;\n var listItem = document.createElement(\'li\');\n  listItem.textContent = result;\n  list.appendChild(listItem);\n}';


textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

結(jié)論

我們建議這樣做:...

以上內(nèi)容是否對您有幫助：

← Handling text — strings in JavaScript

Server-side web frameworks →

寫筆記

我要補(bǔ)充