字符串对象
字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。
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>
标签:console,log,示例,JavaScript,html,let,str,字符串,css
From: https://blog.csdn.net/ndjziskwkhdh/article/details/139551378