JavaScript String 对象属性方法小结

时间 2020-12-26

虽然写这个博客主要目的是为了给我自己做一个思路记忆录，但是如果你恰好点了进来，那么先对你说一声欢迎。我并不是什么大触，只是一个菜菜的学生，如果您发现了什么错误或者您对于某些地方有更好的意见，非常欢迎您的斧正！

学习来源：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>

JavaScript String 对象属性方法 小结

String 对象属性

String 对象方法

JavaScript String 对象属性方法小结