<div id="article_content" class="article_content clearfix csdn-tracking-statistics" data-pid="blog" data-mod="popu_307" data-dsm="post">
<link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-f57960eb32.css">
<div id="content_views" class="markdown_views">
<!-- flowchart 箭头图标 勿删 -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path></svg>
<h4 id="一字符串操作方法">一、字符串操作方法</h4>
<p>js中字符串方法操作有很多:concat、indexOf…. <br>
这里只要介绍两种经常混淆的字符串截取方法:<code>substring</code>、<code>substr</code> </p>
<h4 id="二从例子入手">二、从例子入手</h4>
<pre class="prettyprint" name="code"><code class="hljs rust has-numbering" onclick="mdcp.signin(event)"><span class="hljs-keyword">let</span> <span class="hljs-keyword">str</span> = <span class="hljs-string">'xiaobe'</span>
<span class="hljs-comment">//substring(start,end)</span>
<span class="hljs-keyword">let</span> str1 = <span class="hljs-keyword">str</span>.substring(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>);
<span class="hljs-comment">//substr(start,length)</span>
<span class="hljs-keyword">let</span> str2 = <span class="hljs-keyword">str</span>.substr(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>);
console.<span class="hljs-keyword">log</span>(str1); <span class="hljs-comment">//i</span>
console.<span class="hljs-keyword">log</span>(str2); <span class="hljs-comment">//ia</span><div class="hljs-button signin" data-title="登录后复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li></ul></pre>
<p>可以看到str1输出的长度为1,str2输出长度为2. </p>
<h5 id="substring">substring</h5>
<p>概念:返回字符串的一个子串，传入参数是起始位置和结束位置。 </p>
<blockquote>
<p>不取结束位置的字符</p>
</blockquote>
<h5 id="substr">substr</h5>
<p>返回字符串的一个子串，传入参数是起始位置和长度</p>
<p>substr是根据长度取值,所以上面例子,两个方法虽然参数相同,但是返回值不同</p>
<h4 id="三特殊情况">三、特殊情况</h4>
<h5 id="substring-1">substring</h5>
<ol>
<li>仅有一个入参</li>
</ol>
<pre class="prettyprint" name="code"><code class="hljs rust has-numbering" onclick="mdcp.signin(event)"><span class="hljs-keyword">let</span> <span class="hljs-keyword">str</span> = <span class="hljs-string">'xiaobe'</span>
<span class="hljs-keyword">let</span> str1 = <span class="hljs-keyword">str</span>.substring(<span class="hljs-number">1</span>);
console.<span class="hljs-keyword">log</span>(str1); <span class="hljs-comment">//iaobe</span><div class="hljs-button signin" data-title="登录后复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre>
<p>当只有一个入参的时候,会自动输出后面所有字符</p>
<ol>
<li>入参的start>end</li>
</ol>
<pre class="prettyprint" name="code"><code class="hljs rust has-numbering" onclick="mdcp.signin(event)"><span class="hljs-keyword">let</span> <span class="hljs-keyword">str</span> = <span class="hljs-string">'xiaobe'</span>
<span class="hljs-keyword">let</span> str1 = <span class="hljs-keyword">str</span>.substring(<span class="hljs-number">3</span>,<span class="hljs-number">1</span>);
console.<span class="hljs-keyword">log</span>(str1); <span class="hljs-comment">//ia</span><div class="hljs-button signin" data-title="登录后复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre>
<p>当读取位置大于结束位置的时候,substring会自动调整位置</p>
<ol>
<li>如果end为负数</li>
</ol>
<pre class="prettyprint" name="code"><code class="hljs rust has-numbering" onclick="mdcp.signin(event)"><span class="hljs-keyword">let</span> <span class="hljs-keyword">str</span> = <span class="hljs-string">'xiaobe'</span>
<span class="hljs-keyword">let</span> str1 = <span class="hljs-keyword">str</span>.substring(<span class="hljs-number">3</span>,-<span class="hljs-number">1</span>);
console.<span class="hljs-keyword">log</span>(str1); <span class="hljs-comment">//xia</span><div class="hljs-button signin" data-title="登录后复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre>
<p>当end为负数的时候,substring会输出start之前的字符</p>
<blockquote>
<p>注意,start的最后一位依然是不会取到的</p>
</blockquote>
<h5 id="substr-1">substr</h5>
<ol>
<li>end为负数</li>
</ol>
<pre class="prettyprint" name="code"><code class="hljs rust has-numbering" onclick="mdcp.signin(event)"><span class="hljs-keyword">let</span> <span class="hljs-keyword">str</span> = <span class="hljs-string">'xiaobe'</span>
<span class="hljs-keyword">let</span> str1 = <span class="hljs-keyword">str</span>.substring(<span class="hljs-number">3</span>,-<span class="hljs-number">1</span>);
console.<span class="hljs-keyword">log</span>(str1); <span class="hljs-comment">// </span><div class="hljs-button signin" data-title="登录后复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre>
<p>substr会输出空。毕竟length为负数,自然不会输出东西</p>
<h4 id="四扩展">四、扩展</h4>
<p>其实substring和substr的关系与slice和splice关系相似</p>
<h5 id="slicestartend">slice(start,end)</h5>
<p>用法和substring类似,取值:[start,end)</p>
<pre class="prettyprint" name="code"><code class="hljs rust has-numbering" onclick="mdcp.signin(event)"><span class="hljs-comment">//当end为负数时候</span>
<span class="hljs-keyword">let</span> <span class="hljs-keyword">str</span> = <span class="hljs-string">'xiaobe'</span>
<span class="hljs-keyword">let</span> str3 = <span class="hljs-keyword">str</span>.slice(<span class="hljs-number">1</span>,-<span class="hljs-number">1</span>);
console.<span class="hljs-keyword">log</span>(str3) <span class="hljs-comment">//iaobe</span><div class="hljs-button signin" data-title="登录后复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre>
<p>substring会倒序输出,而slice会输出后续全部</p>
<blockquote>
<p>slice方法可用于字符串和数组</p>
</blockquote>
<p>下面介绍一个和slice方法很像的方法,但是这个方法仅仅使用于<font color="red">数组</font></p>
<h5 id="splicestartlengthitem1item2">splice(start,length,item1,item2….)</h5>
<div class="table-box"><table>
<thead>
<tr>
<th>参数</th>
<th align="center">描述</th>
</tr>
</thead>
<tbody><tr>
<td>start</td>
<td align="center">必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置</td>
</tr>
<tr>
<td>length</td>
<td align="center">必需。要删除的项目数量。如果设置为 0，则不会删除项目。</td>
</tr>
<tr>
<td>item1…itemX</td>
<td align="center">可选。向数组添加的新项目。</td>
</tr>
</tbody></table></div>
<blockquote>
<p>splice会改变原数组 slice不会。</p>
</blockquote>
<h4 id="五js字符串方法大全">五、js字符串方法大全</h4>
<blockquote>
<p>转载:<a href="https://www.cnblogs.com/l1pe1/p/6197371.html" rel="nofollow" target="_blank">https://www.cnblogs.com/l1pe1/p/6197371.html</a></p>
</blockquote>
<ul>
<li>concat</li>
</ul>
<pre class="prettyprint" name="code"><code class="hljs cs has-numbering" onclick="mdcp.signin(event)">将两个或多个字符的文本组合起来，返回一个新的字符串。
<span class="hljs-keyword">var</span> a = <span class="hljs-string">"hello"</span>;
<span class="hljs-keyword">var</span> b = <span class="hljs-string">",world"</span>;
<span class="hljs-keyword">var</span> c = a.concat(b);
alert(c);
<span class="hljs-comment">//c = "hello,world"</span><div class="hljs-button signin" data-title="登录后复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre>
<ul>
<li>indexOf</li>
</ul>
<pre class="prettyprint" name="code"><code class="hljs cs has-numbering" onclick="mdcp.signin(event)"><span class="hljs-comment">//返回字符串中一个子串第一处出现的索引（从左到右搜索）。如果没有匹配项，返回 -1 。</span>
<span class="hljs-keyword">var</span> index1 = a.indexOf(<span class="hljs-string">"l"</span>);
<span class="hljs-comment">//index1 = 2</span>
<span class="hljs-keyword">var</span> index2 = a.indexOf(<span class="hljs-string">"l"</span>,<span class="hljs-number">3</span>);
<span class="hljs-comment">//index2 = 3</span><div class="hljs-button signin" data-title="登录后复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre>
<ul>
<li>charAt</li>
</ul>
<pre class="prettyprint" name="code"><code class="hljs cs has-numbering" onclick="mdcp.signin(event)"><span class="hljs-comment">//返回指定位置的字符。</span>
<span class="hljs-keyword">var</span> get_char = a.charAt(<span class="hljs-number">0</span>);
<span class="hljs-comment">//get_char = "h"</span>
lastIndexOf
返回字符串中一个子串最后一处出现的索引（从右到左搜索），如果没有匹配项，返回 -<span class="hljs-number">1</span> 。
<span class="hljs-keyword">var</span> index1 = lastIndexOf(<span class="hljs-string">'l'</span>);
<span class="hljs-comment">//index1 = 3</span>
<span class="hljs-keyword">var</span> index2 = lastIndexOf(<span class="hljs-string">'l'</span>,<span class="hljs-number">2</span>)
<span class="hljs-comment">//index2 = 2</span><div class="hljs-button signin" data-title="登录后复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li></ul></pre>
<ul>
<li>match</li>
</ul>
<pre class="prettyprint" name="code"><code class="hljs javascript has-numbering" onclick="mdcp.signin(event)"><span class="hljs-comment">//检查一个字符串匹配一个正则表达式内容，如果么有匹配返回 null。</span>
<span class="hljs-keyword">var</span> re = <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-regexp">/^\w+$/</span>);
<span class="hljs-keyword">var</span> is_alpha1 = a.match(re);
<span class="hljs-comment">//is_alpha1 = "hello"</span>
<span class="hljs-keyword">var</span> is_alpha2 = b.match(re);
<span class="hljs-comment">//is_alpha2 = null</span><div class="hljs-button signin" data-title="登录后复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre>
<ul>
<li>substring</li>
</ul>
<pre class="prettyprint" name="code"><code class="hljs cs has-numbering" onclick="mdcp.signin(event)"><span class="hljs-comment">//返回字符串的一个子串，传入参数是起始位置和结束位置。</span>
<span class="hljs-keyword">var</span> sub_string1 = a.substring(<span class="hljs-number">1</span>);
<span class="hljs-comment">//sub_string1 = "ello"</span>
<span class="hljs-keyword">var</span> sub_string2 = a.substring(<span class="hljs-number">1</span>,<span class="hljs-number">4</span>);
<span class="hljs-comment">//sub_string2 = "ell"</span><div class="hljs-button signin" data-title="登录后复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre>
<ul>
<li>substr</li>
</ul>
<pre class="prettyprint" name="code"><code class="hljs cs has-numbering" onclick="mdcp.signin(event)"><span class="hljs-comment">//返回字符串的一个子串，传入参数是起始位置和长度</span>
<span class="hljs-keyword">var</span> sub_string1 = a.substr(<span class="hljs-number">1</span>);
<span class="hljs-comment">//sub_string1 = "ello"</span>
<span class="hljs-keyword">var</span> sub_string2 = a.substr(<span class="hljs-number">1</span>,<span class="hljs-number">4</span>);
<span class="hljs-comment">//sub_string2 = "ello"</span><div class="hljs-button signin" data-title="登录后复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre>
<ul>
<li>replace</li>
</ul>
<pre class="prettyprint" name="code"><code class="hljs cs has-numbering" onclick="mdcp.signin(event)"><span class="hljs-comment">//用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。</span>
<span class="hljs-keyword">var</span> result1 = a.replace(re,<span class="hljs-string">"Hello"</span>);
<span class="hljs-comment">//result1 = "Hello"</span>
<span class="hljs-keyword">var</span> result2 = b.replace(re,<span class="hljs-string">"Hello"</span>);
<span class="hljs-comment">//result2 = ",world"</span><div class="hljs-button signin" data-title="登录后复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre>
<ul>
<li>search</li>
</ul>
<pre class="prettyprint" name="code"><code class="hljs cs has-numbering" onclick="mdcp.signin(event)"><span class="hljs-comment">//执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。</span>
<span class="hljs-keyword">var</span> index1 = a.search(re);
<span class="hljs-comment">//index1 = 0</span>
<span class="hljs-keyword">var</span> index2 = b.search(re);
<span class="hljs-comment">//index2 = -1</span><div class="hljs-button signin" data-title="登录后复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre>
<ul>
<li>slice</li>
</ul>
<pre class="prettyprint" name="code"><code class="hljs cs has-numbering" onclick="mdcp.signin(event)"><span class="hljs-comment">//提取字符串的一部分，并返回一个新字符串（与 substring 相同）。</span>
<span class="hljs-keyword">var</span> sub_string1 = a.slice(<span class="hljs-number">1</span>);
<span class="hljs-comment">//sub_string1 = "ello"</span>
<span class="hljs-keyword">var</span> sub_string2 = a.slice(<span class="hljs-number">1</span>,<span class="hljs-number">4</span>);
<span class="hljs-comment">//sub_string2 = "ell"</span><div class="hljs-button signin" data-title="登录后复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre>
<ul>
<li>split</li>
</ul>
<pre class="prettyprint" name="code"><code class="hljs go has-numbering" onclick="mdcp.signin(event)">通过将字符串划分成子串，将一个字符串做成一个字符串数组。
<span class="hljs-keyword">var</span> arr1 = a.split(<span class="hljs-string">""</span>);
<span class="hljs-comment">//arr1 = [h,e,l,l,o]</span>
length
返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。
<span class="hljs-keyword">var</span> <span class="hljs-built_in">len</span> = a.length();
<span class="hljs-comment">//len = 5</span><div class="hljs-button signin" data-title="登录后复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre>
<ul>
<li>toLowerCase</li>
</ul>
<pre class="prettyprint" name="code"><code class="hljs cs has-numbering" onclick="mdcp.signin(event)"><span class="hljs-comment">//将整个字符串转成小写字母。</span>
<span class="hljs-keyword">var</span> lower_string = a.toLowerCase();
<span class="hljs-comment">//lower_string = "hello"</span>
toUpperCase
将整个字符串转成大写字母。
<span class="hljs-keyword">var</span> upper_string = a.toUpperCase();
<span class="hljs-comment">//upper_string = "HELLO"</span><div class="hljs-button signin" data-title="登录后复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> </div>
<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-258a4616f7.css" rel="stylesheet">
</div>