现在我们学习基本的字符串语法, 让我们开始思考一下我们可以对内置方法的字符串做什么有用的操作，例如查找文本字符串的长度，加入和分割字符串， 将字符串中的一个字符替换为另一个字符。
| 前提： | 基本的电脑知识， 对HTML和CSS有一定的了解，最好是懂一点javascript知识。 |
|---|---|
| 目的: | 明白字符串这个对象，学会使用字符串的基本方法去处理字符串 |
字符串是对象
我们曾经说过，现在我们重申一遍—在javascript中，一切都是对象。例如我们创建一个字符串。
var string = 'This is my string';
一旦你的变量成为字符串对象实例, 你就可以有大量的原型和方法编辑它. 如果你进入String对象页并观察页面旁边的列表你就会明白这一点。
可能现在你的大脑开始迷糊了，不要担心！ 在你的学习进程中你真的不需要过早地理解大部分这方面知识，但是接下来我们这儿要看的是你要经常使用的一些知识。
现在我们在控制台中加些示例 ，我们已经提供了以下示例（你可在单独打开控制台标签或窗口，或者选择使用浏览器开发者控制台）
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;
这个结果应该返回一个数字：7,因为"mozilla"的长度为7个字符. 说字符串的长度有用是有很多原因的, 例如，你可能想算出一连串名字的长度，并用名字长度来作为名字排序的依据，亦或让一个用户知道他输入的用户名太长，已经超出了输入的字符串长度限制。
检索特定字符串字符
在相关的注释中，您可以使用方括号符号返回字符串中的任何字符 - 这意味着您在变量名称的末尾包含方括号（[]）。 在方括号内，您可以包含要返回的字符数，例如检索您要执行此操作的第一个字母：
browserType[0];
电脑从0开始，不是1！ 要检索任何字符串的最后一个字符，我们可以使用以下行，将此技术与我们上面看到的length属性相结合：
browserType[browserType.length-1];
mozilla”的长度为7，但由于计数从0开始，所以字符位置为6，因此需要长度为1。 例如，您可以使用它来查找一系列字符串的第一个字母，并按字母顺序排列。
在字符串中查找子字符串并提取它
- 有时候你会发现一个较大的字符串是否存在于一个较大的字符串中（我们通常会说一个字符串中存在一个子字符串）。 这可以使用
indexOf()方法来完成，该方法需要一个parameter 你想要的子字符串 搜索。 尝试这个：browserType.indexOf('zilla');这给了我们2的结果，因为子串“zilla”从“mozilla”内的位置2（0，1，2 - 所以3个字符）开始。 这样的代码可以用来过滤字符串。 例如，假设我们有一个Web地址列表，只想打印出包含“mozilla”的那些。
- 这可以以另一种方式完成，这可能更有效。 尝试以下：
browserType.indexOf('vanilla');他应该给你一个结果-1 - 当在主字符串中找不到子字符串（在本例中为“vanilla”）时返回。
您可以使用它来查找不包含子串“mozilla”的所有字符串实例，或者如果使用否定运算符，请执行以下操作。 你可以这样做：if(browserType.indexOf('mozilla') !== -1) { // do stuff with the string } - 当你知道字符串中的子字符串开始的位置，你知道你想要的字符结束时，
slice()可以用来提取 它。 尝试以下： - 此外，如果您知道要在某个字符之后提取字符串中的所有剩余字符，则不必包含第二个参数，而只需要包含要从中提取的字符位置 字符串中的其余字符。 尝试以下：
browserType.slice(2);
这返回“zilla” - 这是因为2的字符位置是字母z，并且因为没有包含第二个参数，所以返回的子字符串是字符串中的所有剩余字符。
Note: slice()的第二个参数是可选的 ： 如果你没有传入参数，这个分片结束位置会在原始字符串的末尾。这个方法也有其他的选项；学习slice()这页，来看看你还能发现什么其他作用。
Changing case
字符串方法toLowerCase()和toUpperCase()字符串并将所有字符分别转换为大写或大写。 例如，如果要在将数据存储在数据库中之前对所有用户输入的数据进行规范化，这可能非常有用。
让我们尝试输入以下几行来看看会发生什么：
var radData = 'My NaMe Is MuD'; radData.toLowerCase(); radData.toUpperCase();
更新字符串的部分
您可以使用replace()方法将字符串中的一个子字符串替换为另一个子字符串。 这个工作非常简单，在一个基本的层面，虽然有一些先进的事情，你可以做，我们不会进入。
它需要两个参数 - 要替换的字符串和要替换的字符串。 尝试这个例子：
browserType.replace('moz','van');
Active learning examples
在本节中，我们将让您在编写一些字符串操作代码时尽力处理。 在下面的每个练习中，我们有一个字符串数组，一个循环，用于处理数组中的每个值，并将其显示在项目符号列表中。 您现在不需要了解数组或循环 - 这些将在以后的文章中解释。 所有你需要做的每一种情况都是写出将以我们想要的格式输出字符串的代码。
每个示例都附带一个“重置”按钮，您可以使用该按钮重置代码，如果您犯了错误，并且无法再次工作，并且显示解决方案按钮，您可以按下来看到一个潜在的答案，如果你真的卡住了。
过滤问候留言
在第一个练习中，我们将简单介绍一下 - 我们有一系列的问候卡片消息，但我们希望对它们进行排序，以列出圣诞消息。 我们希望您在if（...）结构中填写条件测试，以测试每个字符串，并将其打印在列表中，如果它是圣诞消息。
- 首先考虑一下如何测试每种情况下的消息是否为圣诞消息。 所有这些消息中都有什么字符串，您可以使用什么方法来测试是否存在？
- 然后，您需要编写操作数1操作2形式的条件测试。 左边的东西等于右边的东西吗？ 或者在这种情况下，方法调用在左边返回的结果在右边？
- 提示：在这种情况下，测试方法调用是否不等于某个结果可能更有用。
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);
Fixing capitalization
在这个练习中，我们有英国城市的名字，但是这个大写字母都搞砸了。 我们希望你改变它们，使它们都是小写字母，除了首字母。 一个很好的方法是：
- 将输入变量中包含的整个字符串转换为小写，并将其存储在新变量中。
- 在此新变量中获取字符串的第一个字母并将其存储在另一个变量中。
- 将此最新变量用作子字符串，将小写字母的第一个字母替换为小写字母的第一个字母，更改为大写。 将此替换过程的结果存储在另一个新变量中。
- 将结果变量的值更改为最终结果，而不是输入。
Note: 一个提示 - 字符串方法的参数不必是字符串文字; 它们也可以是变量，甚至是在其上调用方法的变量。
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);
从原先部分得到新字符串
在最后一个练习中，阵列包含一堆字符串，其中包含有关英格兰北部火车站的信息。 字符串是包含三字母站代码的数据项，后面是一些机器可读数据，后跟分号，后跟可读站名。 例如：
MAN675847583748sjt567654;Manchester Piccadilly
我们要提取站点代码和名称，并将它们放在一起，具有以下结构的字符串：
MAN: Manchester Piccadilly
我们建议这样做：
- 提取三个字母的站代码并将其存储在一个新的变量中。
- 查找分号的字符索引号。
- 使用分号字符索引号作为参考点提取人可读的站名，并将其存储在新变量中。
- 连接两个新的变量和一个字符串文字，使最终的字符串。
- 将结果变量的值更改为等于最终的字符串，而不是输入。
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);
结论
你不能逃避在编程中处理单词和句子的事实是非常重要的 - 特别是在JavaScript中，因为网站都是与人沟通。 本文已经给出了您现在需要了解的关于操作字符串的基础知识。 这将为您服务，因为您将来会进入更为复杂的课题。 接下来，我们将在短期内研究我们需要关注的最后一个主要类型的数据 - 数组。