字符串方法

一:charAt()方法

定义和用法

charAt() 方法可返回指定位置的字符。

请注意,JavaScript 并没有一种有别于字符串类型的字符数据类型,所以返回的字符是长度为 1 的字符串。

实例

在字符串 "Hello world!" 中,我们将返回位置 1 的字符:

<script type="text/javascript">
var str="Hello world!"
document.write(str.charAt(1))
</script>
//打印结果e
二:charCodeAt()方法
定义和用法

charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。

方法 charCodeAt() 与 charAt() 方法执行的操作相似,只不过前者返回的是位于指定位置的字符的编码,而后者返回的是字符子串。

实例

在字符串 "Hello world!" 中,我们将返回位置 1 的字符的 Unicode 编码:

<script type="text/javascript">var str="Hello world!"
document.write(str.charCodeAt(1))</script>
//打印结果 101
三:concat()方法
定义和用法

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

实例

例子 1

在本例中,我们将把 concat() 中的参数连接到数组 a 中:

<script type="text/javascript">var a = [1,2,3];
document.write(a.concat(4,5));</script>
//输出:1,2,3,4,5

例子 2

在本例中,我们创建了两个数组,然后使用 concat() 把它们连接起来:

<script type="text/javascript">var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"document.write(arr.concat(arr2))</script>
//输出:George,John,Thomas,James,Adrew,Martin

例子 3

在本例中,我们创建了三个数组,然后使用 concat() 把它们连接起来:

<script type="text/javascript">var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"document.write(arr.concat(arr2,arr3))</script>
//输出:George,John,Thomas,James,Adrew,Martin,William,Franklin
四:fromCharCode()
定义和用法

fromCharCode() 可接受一个指定的 Unicode 值,然后返回一个字符串。

实例

在本例中,我们将根据 Unicode 来输出 "HELLO" 和 "ABC":

<script type="text/javascript">document.write(String.fromCharCode(72,69,76,76,79))
document.write("<br />")
document.write(String.fromCharCode(65,66,67))</script>
//以上代码的输出:HELLO  ABC
五:indexOf()
定义和用法

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

实例

在本例中,我们将在 "Hello world!" 字符串内进行不同的检索:

<script type="text/javascript">var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))</script>

以上代码的输出:

0
-1
6
六:lastIndexOf()
定义和用法

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。

实例

在本例中,我们将在 "Hello world!" 字符串内进行不同的检索:

<script type="text/javascript">var str="Hello world!"
document.write(str.lastIndexOf("Hello") + "<br />")
document.write(str.lastIndexOf("World") + "<br />")
document.write(str.lastIndexOf("world"))</script>

以上代码的输出:

0
-1
6
七:localeCompare()
定义和用法

用本地特定的顺序来比较两个字符串。

实例

在本例中,我们将用本地特定排序规则对字符串数组进行排序:

var str;
str.sort (function(a,b){return a.localeCompare(b)})
八:match()
定义和用法

match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。

该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。

实例

例子 1

在本例中,我们将在 "Hello world!" 中进行不同的检索:

<script type="text/javascript">var str="Hello world!"
document.write(str.match("world") + "<br />")
document.write(str.match("World") + "<br />")
document.write(str.match("worlld") + "<br />")
document.write(str.match("world!"))</script>

输出:

world
null
null
world!

例子 2

在本例中,我们将使用全局匹配的正则表达式来检索字符串中的所有数字:

<script type="text/javascript">var str="1 plus 2 equal 3"
document.write(str.match(/\d+/g))</script>

输出:

1,2,3
九:replace()
定义和用法

replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

实例

例子 1

在本例中,我们将使用 "W3School" 替换字符串中的 "Microsoft":

<script type="text/javascript">var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/, "W3School"))</script>

输出:

Visit W3School!

例子 2

在本例中,我们将执行一次全局替换,每当 "Microsoft" 被找到,它就被替换为 "W3School":

<script type="text/javascript">var str="Welcome to Microsoft! "
str=str + "We are proud to announce that Microsoft has "
str=str + "one of the largest Web Developers sites in the world."document.write(str.replace(/Microsoft/g, "W3School"))</script>

输出:

Welcome to W3School! We are proud to announce that W3School
has one of the largest Web Developers sites in the world.

例子 3

您可以使用本例提供的代码来确保匹配字符串大写字符的正确:

text = "javascript Tutorial";
text.replace(/javascript/i, "JavaScript");

例子 4

在本例中,我们将把 "Doe, John" 转换为 "John Doe" 的形式:

name = "Doe, John";
name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");

例子 5

在本例中,我们将把所有的花引号替换为直引号:

name = '"a", "b"';
name.replace(/"([^"]*)"/g, "'$1'");

例子 6

在本例中,我们将把字符串中所有单词的首字母都转换为大写:

name = 'aaa bbb ccc';
uw=name.replace(/\b\w+\b/g, function(word){return word.substring(0,1).toUpperCase()+word.substring(1);});
十:search()
定义和用法

search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。

实例

例子 1

在本例中,我们将检索 "W3School":

<script type="text/javascript">var str="Visit W3School!"
document.write(str.search(/W3School/))</script>

输出:

6

在下面的例子中,无法检索到 w3school(因为 search() 对大小写敏感)。

<script type="text/javascript">var str="Visit W3School!"
document.write(str.search(/w3school/))</script>

输出:

-1

例子 2

在本例中,我们将执行一次忽略大小写的检索:

<script type="text/javascript">var str="Visit W3School!"
document.write(str.search(/w3school/i))</script>

输出:

6
十一:slice()方法
定义和用法

slice() 方法可从已有的数组中返回选定的元素。

实例

例子 1

在本例中,我们将创建一个新数组,然后显示从其中选取的元素:

<script type="text/javascript">var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"document.write(arr + "<br />")
document.write(arr.slice(1) + "<br />")
document.write(arr)</script>

输出:

George,John,Thomas
John,Thomas
George,John,Thomas

例子 2

在本例中,我们将创建一个新数组,然后显示从其中选取的元素:

<script type="text/javascript">var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"document.write(arr + "<br />")
document.write(arr.slice(2,4) + "<br />")
document.write(arr)</script>

输出:

George,John,Thomas,James,Adrew,Martin
Thomas,James
George,John,Thomas,James,Adrew,Martin
十二:split()方法
定义和用法

split() 方法用于把一个字符串分割成字符串数组。

实例

例子 1

在本例中,我们将按照不同的方式来分割字符串:

<script type="text/javascript">var str="How are you doing today?"document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))</script>

输出:

How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you

例子 2

在本例中,我们将分割结构更为复杂的字符串:

"2:3:4:5".split(":")    //将返回["2", "3", "4", "5"]
"|a|b|c".split("|")    //将返回["", "a", "b", "c"]

例子 3

使用下面的代码,可以把句子分割成单词:

var words = sentence.split(' ')或者使用正则表达式作为 separator:var words = sentence.split(/\s+/)

例子 4

如果您希望把单词分割为字母,或者把字符串分割为字符,可使用下面的代码:

"hello".split("")    //可返回 ["h", "e", "l", "l", "o"]若只需要返回一部分字符,请使用 howmany 参数:"hello".split("", 3)    //可返回 ["h", "e", "l"]
十三:substr()方法
定义和用法

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

实例

例子 1

在本例中,我们将使用 substr() 从字符串中提取一些字符:

<script type="text/javascript">var str="Hello world!"
document.write(str.substr(3))</script>

输出:

lo world!

例子 2

在本例中,我们将使用 substr() 从字符串中提取一些字符:

<script type="text/javascript">var str="Hello world!"
document.write(str.substr(3,7))</script>

输出:

lo worl
十四:substring()
定义和用法

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

实例

例子 1

在本例中,我们将使用 substring() 从字符串中提取一些字符:

<script type="text/javascript">var str="Hello world!"
document.write(`str.substring(3)`)</script>

输出:

lo world!

例子 2

在本例中,我们将使用 substring() 从字符串中提取一些字符:

<script type="text/javascript">var str="Hello world!"
document.write(`str.substring(3,7)`)</script>

输出:

lo w
十五:toLocaleLowerCase()
定义和用法

toLocaleLowerCase() 方法用于把字符串转换为小写。

实例

在本例中,"Hello world!" 将以小写字母来显示:

<script type="text/javascript">var str="Hello World!"
document.write(str.toLocaleLowerCase())</script>
十六:toLocaleUpperCase()
定义和用法

toLocaleUpperCase() 方法用于把字符串转换为大写。

实例

在本例中,"Hello world!" 将以大写字母来显示:

<script type="text/javascript">var str="Hello World!"
document.write(str.toLocaleUpperCase())</script>
十七:toLowerCase()
定义和用法

toLowerCase() 方法用于把字符串转换为小写。

实例

在本例中,"Hello world!" 将以小写字母来显示:

<script type="text/javascript">var str="Hello World!"
document.write(str.toLowerCase())</script>
十八:toString()
定义和用法

toString() 方法可把一个 Number 对象转换为一个字符串,并返回结果。

实例

在本例中,我们将把一个数字转换为字符串:

<script type="text/javascript">var number = new Number(1337);
document.write (number.toString())</script>

输出:

1337
十九:toUpperCase()
定义和用法

toUpperCase() 方法用于把字符串转换为大写。

实例

在本例中,"Hello world!" 将以大写字母来显示:

<script type="text/javascript">var str="Hello World!"
document.write(str.toUpperCase())</script>
二十:trim()
定义和用法

trim() 方法用于删除字符串的头尾空白符,空白符包括:空格、制表符 tab、换行符等其他空白符等。

trim() 方法不会改变原始字符串。

trim() 方法不适用于 null, undefined, Number 类型。

实例
function myTrim(x) {return x.replace(/^\s+|\s+$/gm,'');
}function myFunction() {var str = myTrim("        Runoob        ");alert(str);
}

输出结果

Runoob
二十一:valueOf()
定义和用法

valueOf() 方法可返回 String 对象的原始值。

注意:valueOf() 方法通常由 JavaScript 在后台自动进行调用,而不是显式地处于代码中。

实例

返回 String 对象的原始值:

<script>var str="Hello world!";
document.write(str.valueOf());</script>

以上实例输出结果:

Hello world!

参考:https://www.runoob.com/jsref/jsref-obj-string.html

大家好,这个月的干货又整理出来了。

26个经典微信小程序+35套微信小程序源码+微信小程序合集源码下载(免费)

话不多说,关注「前端小辣椒」公众号 ,在微信后台回复「小程序」,获取以下小程序整源码大全。

前端切图仔,常用的21个字符串方法相关推荐

  1. linux 切图软件下载,学会23个linux常用命令,不做前端切图仔~

    来源 | https://segmentfault.com/a/1190000021439560 前言一个前端好好切图不好吗?为什么要学 linux 呢? 嗯,真香 ! 1. ls 命令 : 显示目录 ...

  2. 常用的手机宽度 前端切图用 常用的手机尺寸

    414*736    iPhone6 PLUS 375*667    iPhone6 320*568    iPhone5  诺基亚 320*480    iPhone4 1024*768  ipad ...

  3. css hat,论切图仔的自我修养

    编者按:作者糯米是个工具控,让我们来看看他都私藏了哪些好用的工具吧. 不过,据说都挺贵. Adobe Photoshop CC 2015 Adobe Photoshop 是设计师的必备,所以也是前端切 ...

  4. 「切图仔日常」浅谈加载动画两板斧

    1.前言 此刻深圳大雨瓢泼,周围一片黑压压的.对于这样的日子,果断从冰箱里面拿出肥宅快乐水,打开电脑查看最近更新的番剧,舒服窝在沙发里真是美滋滋. 但是不知道大雨原因,网络加载一直时好时坏,看的贼忧伤 ...

  5. 切图?切图!——切图仔htmlcss秃头指南

    我又开始写博客了 本来平时是使用公司内部的语雀来进行日常工作的记录,但是想了想,一些不涉及内部知识的东西还是写在公共平台上比较好.随时可以查得到.被看到的可能性更大,错漏也会被指出.蛮好的. 这段时间 ...

  6. 你才切图仔,你全家都切图仔

    很多人提起前端的时候,总是闪过一丝微妙的表情,就连不少大学科班生都会对前端的工作职责感到疑惑. 很多人眼里的前端感觉就是做一些酷炫的网页特效,JS 学个皮毛会用框架就好了. 但事实上,一个真正的前端工 ...

  7. 一个切图仔的工作日常

    1.拿到公司设计师给的PSD图(PC端给的是1920px的设计稿,移动端给的750px的设计稿). 2.自己新建一个项目目录(默认有css,js,images文件夹以及一个index.html文件). ...

  8. 前端切图之svg图标的复用基于defs和use 亲测有用

    切图网长期致力于web前端开发外包服务,而我们也关注到现在图标很多时候采用svg更多一点,然后图标字体文件已经提供了很多种类的图标,不过采用svg图标可以自行选择更符合.更好看的图标,相比于字体图标更 ...

  9. 前端切图案例课程一则-姜威-专题视频课程

    前端切图案例课程一则-201人已学习 课程介绍         本课程以一套响应式网站设计图,进行切图为案例,还原老司机整个切图过程.本课程属于初级的前端工程师系列课程中案例课程的第一套课程,本课程需 ...

  10. android 系统的切图方式_android APPUI设计、切图的常用尺寸大全

    今天在APPUI设计群里 ,不少朋友在问  android APPUI设计.切图的常用尺寸到底是多少?很不清楚,所以老谭在此跟大家分享下. Android 系统就被设计为一个可以在多种不同分辨率的设备 ...

最新文章

  1. 6、UmbracoNewsSite:添加新闻分类
  2. C#中数值型数据保留N位小数方法
  3. 整理的一些比较基础的面试知识点
  4. Iaas,Paas,Saas三者的区别联系是什么?
  5. python3所支持的整数进制_Python3快速入门(三)——Python3标准数据类型
  6. php des加密 和java胡同_PHP版本DES加密解(对应.net版与JAVA版)
  7. Install and run DB Query Analyzer 6.04 on Microsoft Windows 10
  8. ORL Character Recgnition
  9. 为android开发安装ubuntu系统环境纪要
  10. Revit二次开发记录
  11. 顾客终生价值-CLV
  12. ROS中gazebo工具学习(使用gazebo加载机器人模型)
  13. BigDecimal.ROUND_HALF_EVEN (银行家算法)
  14. [IMX6Q]fastboot下载u-boot.bin失败提示太大原因
  15. java guardedby_Oracle官方并发教程之Guarded Blocks
  16. 如何让函数只执行一次
  17. html5手机密码修改,HTML5 Canvas简简单单实现手机九宫格手势密码解锁
  18. JavaScript中Date的toGMTString()方法
  19. 模糊测试框架 Sulley 使用手记 (一)
  20. Codeforces 1593C Save More Mice

热门文章

  1. 初识JavaScript
  2. “先进”的飞书为何搞不定钉钉?
  3. android游戏地图编辑器
  4. 没想到曾经排名第一的安全软件,如今变成无法卸载的流氓~
  5. 机器学习:self-paced 和 fine-tuning
  6. 计算机芯片级维修包括哪些,计算机芯片级维修中心(芯片级维培训教材)b.doc
  7. pattern-exploiting training (PET)--Few-Shot Learners
  8. 程序在单片机里是如何运行的?
  9. Android 实现 iBeacon
  10. 彻底解决IE9 文本框无法输入文字,IE窗口闪烁问题(亲测)