javascript 实现英文首字母大写

最新推荐文章于 2024-04-23 11:43:56 发布

Goaread

最新推荐文章于 2024-04-23 11:43:56 发布

阅读量4.4k

点赞数 2

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/godread_cn/article/details/122031487

版权

前端专栏收录该内容

30 篇文章 1 订阅

订阅专栏

实现 javascript 英文首字母大写有多种方法，这里分别介绍了 css 与 js 的实现方式，但主要以 js 为重点。实际开发中，越简单明了越好，css 方式最为直观简单。

css 实现方式

首先介绍 css 实现的方式。

<html>
    <head>
        <style>
            h1 { text-transform: uppercase }
            p.uppercase { text-transform: uppercase }
            p.lowercase { text-transform: lowercase }
            p.capitalize { text-transform: capitalize }
        </style>
	</head>
    
    <body>
        <h1>This Is A H1 Element.</h1>
        <p class="uppercase">THIS IS UPPERCASE</p>
        <p class="lowercase">this is lowercase</p>
        <p class="capitalize">This Is Capitalize</p>
    </body>
</html>

javascript 实现方式

思路一：【截取首字符并拼接其他字符】使用正则匹配字符串，截取首字符，转为大写后与其他字符拼接起来。

function upperFirstConcat(str) {
	let str = str.toLowerCase()
	str = str.replace(/\b\w+\b/g, word => {
		return word.substring(0,1).toUpperCase + word.substring(1)
	})
	
	return str
}

思路二：【只处理首字符】使用正则匹配字符串，只针对首字符转大写 —— 包括空格后面字符串的首字符，其他字符不做处理。

function upperFirst(str) {
    str = str.toLowerCase()
    return str.replace(/\b\w|\s\w/g, fw => {
        return fw.toUpperCase()
    })
}

思路三：【数组遍历】以空格为分界将字符串打散为数组，遍历数组得到每个单字符串，截取首字符并拼接其他字符，并保存在新变量中返回。

拼接时注意加上空格 (‘ ’)。

function toArrayUpperFirst(str) {
    str = str.toLowerCase()
    let arr = str.split(' ')
    let res = ''
    
    for (let i in arr) {
        res += arr[i].substring(0,1).toUpperCase() + arr[i].substring(1) + ' '
    }
    
    return res
}

思路四：【字符串遍历并判断空格】直接遍历字符串，取得下标为 0 的字符并转换为大写，继续遍历，若得到空格，则将当前空格后的字符转换为大写，整个过程都进行拼接，最终将拼接的结果保存在新变量中返回。

function strListToUpperFirst(str) {
    str = str.toLowerCase()
    let res = ''

    for (let i = 0; i < str.length; i++) {
        if (i == 0) { // 首字符
            res += str[i].toUpperCase()
        }

        // 遍历主体
        if (i > 0 && str[i] == ' ' && i < str.length - 1) { // 空格后
            res += ' '
            res += str[i+1].toUpperCase()
            i++ // 必须放在这，因为这里是遍历主体
        }

        res += str[i] // 不管上面的处理是怎样的，原则上所有的字符都要被拼接到 res 上
    }

    return res
}

var text = "abcd ABCD efGH"
console.log(strListToUpperFirst(text))

通过以上几种方式，基本可以解决首字母大写的应用场景。这几个 js 实现方式的最终效果是一致的，但代码量却不同，而且不管是单个字符串，还是用空格隔开的多个单字符串组成的长字符串，用以上几个方法都可以实现。也就是说，在匹配的过程中，空格会自动被判断并将其后的首字符转换为大写。

那么，实际上思路 1 的逻辑最简单常见，思路 2 的代码量最少，而思路 4 最完全。

Goaread

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
javascript 实现英文首字母大写

实现 javascript 英文首字母大写有多种方法，这里分别介绍了 css 与 js 的实现方式，但主要以 js 为重点。实际开发中，越简单明了越好，css 方式最为直观简单。css 实现方式首先介绍 css 实现的方式。<html> <head> <style> h1 { text-transform: uppercase } p.uppercase { text-transfo
复制链接

扫一扫