JavaScript html css 字符串对象

字符串对象

字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串。

length属性

作用：

• 获取字符串长度

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'sunmer'</span> 
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">length</span>)  <span style="color:#aa5500">// 6</span></span></span>

indexOf方法

作用：

• 返回指定内容在原字符串的位置，如果找不到就返回 -1，开始的位置是 index 索引号

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'上海自来水来自海上'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">indexOf</span>(<span style="color:#aa1111">'自'</span>));    <span style="color:#aa5500">// 2 从索引号为0的位置往后查找</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">indexOf</span>(<span style="color:#aa1111">'自'</span>, <span style="color:#116644">3</span>)); <span style="color:#aa5500">// 6 从索引号为3的位置往后查找</span></span></span>

lastIndexOf方法

作用：

• 从后往前找，只找第一个匹配的

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'上海自来水来自海上'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">lastIndexOf</span>(<span style="color:#aa1111">'自'</span>)); <span style="color:#aa5500">// 6 从后向前找</span></span></span>

charAt方法

作用：

• 返回指定位置的字符（index 字符串的索引号）

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'上海自来水来自海上'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">charAt</span>(<span style="color:#116644">1</span>)); <span style="color:#aa5500">// 海 返回索引号为1的字符</span></span></span>

concat方法

作用：

• 拼接字符串，等效于+

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str1</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'上海自来水来自海上，'</span>
<span style="color:#770088">let</span> <span style="color:#0000ff">str2</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'山香红叶时叶红香山。'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str1</span>.<span style="color:#000000">concat</span>(<span style="color:#000000">str2</span>)); <span style="color:#aa5500">// 上海自来水来自海上，山香红叶时叶红香山。</span></span></span>

substr方法

substr(start, length)

作用：

• 字符串截取：从start位置开始（索引号），length 取的个数

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'上海自来水来自海上'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">substr</span>(<span style="color:#116644">2</span>, <span style="color:#116644">3</span>)); <span style="color:#aa5500">// 自来水</span></span></span>

substring方法

substring(start, end)

作用：

• 字符串截取：从start位置开始，截取到end位置

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'上海自来水来自海上'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">substring</span>(<span style="color:#116644">2</span>, <span style="color:#116644">3</span>)); <span style="color:#aa5500">// 自</span></span></span>

slice方法

slice(start, end)

作用：

• 字符串截取：从start位置开始，截取到end位置

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'上海自来水来自海上'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">slice</span>(<span style="color:#116644">2</span>, <span style="color:#116644">3</span>)); <span style="color:#aa5500">// 自</span></span></span>

replace和replaceAll方法

作用：

• 字符串替换

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'山西运煤车煤运西山'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">replace</span>(<span style="color:#aa1111">'山'</span>, <span style="color:#aa1111">'陕'</span>)); <span style="color:#aa5500">// 陕西运煤车煤运西山 replace只替换第一个</span></span></span>

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'山西运煤车煤运西山'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">replaceAll</span>(<span style="color:#aa1111">'山'</span>, <span style="color:#aa1111">'陕'</span>)); <span style="color:#aa5500">// 陕西运煤车煤运西陕  </span></span></span>

• replaceAll替换所有的,chrome85开始支持replaceAll

split方法

作用：

• 将字符串切割成字符串数组

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'2000-10-10'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">split</span>(<span style="color:#aa1111">'-'</span>)); <span style="color:#aa5500">// ['2000', '10', '10']</span></span></span>

toLowerCase方法

作用：

• 字符串转小写

• 返回值：

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'Hello Wrold'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">toLowerCase</span>()); <span style="color:#aa5500">// hello wrold</span></span></span>

toUpperCase()方法

作用：

• 字符串转大写

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'Hello Wrold'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">toUpperCase</span>()); <span style="color:#aa5500">// HELLO WROLD</span></span></span>

trim方法

作用：

• 去掉字符串两边的空格

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'   Hello Wrold    '</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>)         <span style="color:#aa5500">//   Hello Wrold    </span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">trim</span>()); <span style="color:#aa5500">//Hello Wrold</span></span></span>