JavaScript String 对象属性方法 小结
虽然写这个博客主要目的是为了给我自己做一个思路记忆录,但是如果你恰好点了进来,那么先对你说一声欢迎。我并不是什么大触,只是一个菜菜的学生,如果您发现了什么错误或者您对于某些地方有更好的意见,非常欢迎您的斧正!
学习来源:http://www.w3school.com.cn/jsref/jsref_obj_string.asp
String 对象用于处理文本(字符串)。
我把下表中部分函数进行了一个测试。代码在文末。
String 对象属性
属性 | 描述 |
---|---|
constructor | 对创建该对象的函数的引用 |
length | 字符串的长度 |
prototype | 允许您向对象添加属性和方法 |
String 对象方法
方法 | 描述 |
---|---|
anchor() | 创建 HTML 锚。 |
big() | 用大号字体显示字符串。 |
blink() | 显示闪动字符串。 |
bold() | 使用粗体显示字符串。 |
charAt() | 返回在指定位置的字符。 |
charCodeAt() | 返回在指定的位置的字符的 Unicode 编码。 |
concat() | 连接字符串。 |
fixed() | 以打字机文本显示字符串。 |
fontcolor() | 使用指定的颜色来显示字符串。 |
fontsize() | 使用指定的尺寸来显示字符串。 |
fromCharCode() | 从字符编码创建一个字符串。 |
indexOf() | 检索字符串。 |
italics() | 使用斜体显示字符串。 |
lastIndexOf() | 从后向前搜索字符串。 |
link() | 将字符串显示为链接。 |
localeCompare() | 用本地特定的顺序来比较两个字符串。 |
match() | 找到一个或多个正则表达式的匹配。 |
replace() | 替换与正则表达式匹配的子串。 |
search() | 检索与正则表达式相匹配的值。 |
slice() | 提取字符串的片断,并在新的字符串中返回被提取的部分。 |
small() | 使用小字号来显示字符串。 |
split() | 把字符串分割为字符串数组。 |
strike() | 使用删除线来显示字符串。 |
sub() | 把字符串显示为下标。 |
substr() | 从起始索引号提取字符串中指定数目的字符。 |
substring() | 提取字符串中两个指定的索引号之间的字符。 |
sup() | 把字符串显示为上标。 |
toLocaleLowerCase() | 把字符串转换为小写。 |
toLocaleUpperCase() | 把字符串转换为大写。 |
toLowerCase() | 把字符串转换为小写。 |
toUpperCase() | 把字符串转换为大写。 |
toSource() | 代表对象的源代码。 |
toString() | 返回字符串。 |
valueOf() | 返回某个字符串对象的原始值。 |
我的测试结果:每一个按钮点击后就可以出现相应的函数效果。
就像这样:
以下是源代码(有哪里需要我加注释的,欢迎在评论区与我交流):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>String 对象用于处理文本(字符串)。</title>
<style media="screen" type="text/css">
body {
margin: 0;
padding: 0;
}
input {
margin-left: 50px;
margin-top: 10px;
display: block;
font-size: 20px;
}
p {
margin-left: 50px;
font-size: 20px;
}
</style>
<script type="text/javascript">
function Length() {
var str = "Hi,my dear friend!";
document.getElementById('length').innerHTML = 'Hi,my dear friend!的长度为:' + str.length;
}
function Big() {
var str = "Hi,my dear friend!";
document.getElementById('big').innerHTML = 'Hi,my dear friend! → ' + str.big();
}
function Blink() {
var str = "Hi,my dear friend!";
document.getElementById('blink').innerHTML = 'Hi,my dear friend! → ' + str.blink();
}
function Bold() {
var str = "Hi,my dear friend!";
document.getElementById('bold').innerHTML = 'Hi,my dear friend! → ' + str.bold();
}
function CharAt() {
var str = "Hi,my dear friend!";
document.getElementById('charat').innerHTML = 'Hi,my dear friend!第6个字符是 : ' + str.charAt(6);
}
function CharCodeAt() {
var str = "Hi,my dear friend!";
document.getElementById('charcodeat').innerHTML = 'Hi,my dear friend!第6个字符的Unicode编码是 : ' + str.charCodeAt(6);
}
function Concat() {
var str1 = "Hi,";
var str2 = "my dear friend!";
document.getElementById('concat').innerHTML = '连接' + str1 + '与' + str2 + ':' + str1.concat(str2);
}
function Fixed() {
var str = "Hi,my dear friend!";
document.getElementById('fixed').innerHTML = 'Hi,my dear friend! → ' + str.fixed();
}
function FontColor() {
var str = "Hi,my dear friend!";
document.getElementById('fontcolor').innerHTML = 'Hi,my dear friend! 显示为(255,182,193) :' +
str.fontcolor("#FFB6C1");
}
function FontSize() {
var str = "Hi,my dear friend!";
document.getElementById('fontsize').innerHTML = 'Hi,my dear friend! → ' + str.fontsize(5);
}
function Italics() {
var str = "Hi,my dear friend!";
document.getElementById('italics').innerHTML = 'Hi,my dear friend! → ' + str.italics();
}
function Link() {
var str = "百度";
document.getElementById('link').innerHTML = str.link('https://www.baidu.com/');
}
function Match() {
var str = "Hi,my dear friend!";
var str2 = '1 plus 2 equal 3';
document.getElementById('match').innerHTML = 'Hi,my dear friend! 匹配 \'my\'=' + str.match('my') +
'<br />' + "使用全局匹配的正则表达式来检索字符串\'1 plus 2 equal 3\'中的所有数字:" + str2.match(/\d+/g);
}
function Replace() {
var str = 'Visual Microsoft!';
document.getElementById('replace').innerHTML =
'替换前:' + str + '<br />' +
'替换后:' + str.replace(/Microsoft/, 'Studio');
var str2 = "Welcome to Microsoft! <br />"
str2 = str2 + "We are proud to announce that Microsoft has<br />"
str2 = str2 + "one of the largest Web Developers sites in the world."
var str3 = 'Doe, John';
var str4 = '"a","b"';
var str5 = 'aaa bbb, ccc';
document.getElementById('replace').innerHTML +=
'<br />全局替换前:<br />' + str2 +
'<br />全局替换后:<br />' + str2.replace(/Microsoft/g, 'Baidu') +
'<br /><br />把 "Doe, John" 转换为 "John Doe" 的形式:<br />' + str3.replace(/(\w+)\s*,\s*(\w+)/, "$2 $1") +
'<br /><br />将把所有的花引号替换为直引号<br />' + str4 + ' → ' + str4.replace(/("[^"]*")/, "'$1'") +
'<br /><br />把字符串中所有单词的首字母都转换为大写<br />' + str5 +
' → ' + str5.replace(/(\b\w+\b)/g, function(word) {
return word.substring(0, 1).toUpperCase() + word.substring(1);
});
}
function Search() {
var str = 'IP:111.47.18.44';
document.getElementById('search').innerHTML = '检索 ' + str + ' 中IP的位置: ' +
str.search(/(\d{1,3}\.){3}\d{1,3}/);
}
function Slice() {
var str = "Welcome to my blog!";
document.getElementById('slice').innerHTML = '提取 ' + str + ' 的第4~12个字符:<br />' +
str.slice(4, 12);
}
function Small() {
var str = 'Welcome to my blog!';
document.getElementById('small').innerHTML = str + " → " + str.small();
}
function Split() {
var str = 'Welcome to my blog!';
var str1 = '2:3:4:6'
document.getElementById('split').innerHTML = str + '<br />' + str.split("") +
'<br />split(" "):' + str.split(" ") +
'<br />split(/\\s+/):' + str.split(/\s+/) +
'<br />split(" ", 3):' + str.split(" ", 3) +
'<br />' + str1 + ' split(":") → ' + str1.split(":");
}
function Strike() {
var str = 'Welcome to my blog!';
document.getElementById('strike').innerHTML = str + " → " + str.strike();
}
function Sub() {
var str = 'Welcome to my blog!';
document.getElementById('sub').innerHTML = str + str.sub();
}
function SubStr() {
var str = 'Welcome to my blog!';
document.getElementById('substr').innerHTML = str + ':提取从5开始后的9个字符→ ' + str.substr(5, 9);
}
function SubString() {
var str = 'Welcome to my blog!';
document.getElementById('substring').innerHTML = str + ':提取5~13个字符→ ' + str.substring(5, 13);
}
function ToLowerCase() {
var str = 'Welcome To My Blog!';
document.getElementById('tolowercase').innerHTML = str + ' → ' + str.toLowerCase();
}
function ToUpperCase() {
var str = 'Welcome To My Blog!';
document.getElementById('touppercase').innerHTML = str + ' → ' + str.toUpperCase();
}
</script>
</head>
<body>
<input type="button" value="length属性:返回字符串中的字符数目。" onclick="Length()">
<p id="length"></p>
<input type="button" value="big()用于把字符串显示为大号字体。" onclick="Big()">
<p id="big"></p>
<input type="button" value="blink()用于显示闪动的字符串。" onclick="Blink()">
<p id="blink"></p>
<input type="button" value="bold()用于把字符串显示为粗体。" onclick="Bold()">
<p id="bold"></p>
<input type="button" value="charAt()返回指定位置的字符。" onclick="CharAt()">
<p id="charat"></p>
<input type="button" value="charCodeAt()返回指定位置的字符的 Unicode 编码。" onclick="CharCodeAt()">
<p id="charcodeat"></p>
<input type="button" value="concat()连接两个或多个字符串。" onclick="Concat()">
<p id="concat"></p>
<input type="button" value="fixed()把字符串显示为打字机字体。" onclick="Fixed()">
<p id="fixed"></p>
<input type="button" value="fontcolor()按照指定的颜色来显示字符串。" onclick="FontColor()">
<p id="fontcolor"></p>
<input type="button" value="fontsize(size)按照指定的尺寸来显示字符串。(size:1~7)" onclick="FontSize()">
<p id="fontsize"></p>
<input type="button" value="italics()把字符串显示为斜体。" onclick="Italics()">
<p id="italics"></p>
<input type="button" value="link() 方法用于把字符串显示为超链接。" onclick="Link()">
<p id="link"></p>
<input type="button" value="match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。" onclick="Match()">
<p id="match"></p>
<input type="button" value="replace(regexp/substr,replacement)在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。" onclick="Replace()">
<p id="replace"></p>
<input type="button" value="search()检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。" onclick="Search()">
<p id="search"></p>
<input type="button" value="slice()提取字符串的某个部分,并以新的字符串返回被提取的部分。" onclick="Slice()">
<p id="slice"></p>
<input type="button" value="small()把字符串显示为小号字。" onclick="Small()">
<p id="small"></p>
<input type="button" value="split()把一个字符串分割成字符串数组。" onclick="Split()">
<p id="split"></p>
<input type="button" value="strike()显示加删除线的字符串。" onclick="Strike()">
<p id="strike"></p>
<input type="button" value="sub()把字符串显示为下标。" onclick="Sub()">
<p id="sub"></p>
<input type="button" value="substr(start,length)在字符串中抽取从 start 下标开始的指定数目的字符。" onclick="SubStr()">
<p id="substr"></p>
<input type="button" value="substring(start,end)提取字符串中介于两个指定下标之间的字符。" onclick="SubString()">
<p id="substring"></p>
<input type="button" value="toLowerCase()把字符串转换为小写。" onclick="ToLowerCase()">
<p id="tolowercase"></p>
<input type="button" value="toUpperCase()把字符串转换为大写。" onclick="ToUpperCase()">
<p id="touppercase"></p>
</body>
</html>