JavaScript's simplest text manipulations transform strings between uppercase and lowercase. Capitalization is trickier (and not yet an established method), but entirely achievable.
JavaScript最简单的文本操作可在大写和小写之间转换字符串。 大写比较棘手(但尚未确定),但是完全可以实现。
In many cases, you actually don’t need to use JavaScript for these processes: if the content is only going to be presented on a web page, it’s easier and more performant to transform text using CSS.
在许多情况下,您实际上不需要在这些过程中使用JavaScript:如果仅将内容显示在网页上,则使用CSS转换文本会更轻松,更高效 。
However, CSS has its limits: it can only be used to style the presentation of text context on the web page - paragraphs & headings, links, etc - and can’t influence text in attribute values, such as title
or alt
. If you’re trying to format text before it is inserted into a database, for example, JavaScript (possibly in combination with PHP and HTML5’s autocapitalize
attribute) is the way to go.
但是,CSS有其局限性:它只能用于设置网页上文本上下文 ( 段落和标题 , 链接等)的样式,而不能影响属性值(例如title
或alt
文本。 例如,如果要在将文本插入数据库之前对其进行格式化,则可以使用JavaScript(可能与PHP和HTML5的autocapitalize
属性结合使用)。
大写 (Uppercase)
In JavaScript:
在JavaScript中 :
var sourceText = "To see a World in a Grain of Sand";
console.log(sourceText.toUpperCase());
> TO SEE A WORLD IN A GRAIN OF SAND
CSS Alternative: If the text was within an element with an id
of auguries1
:
CSS替代 :如果文本在id
为auguries1
的元素内:
#auguries1 { text-transform: uppercase; }
小写 (Lowercase)
In JavaScript, use the very ironically camelCased toLowerCase()
method, shown here using slightly different code from the first example:
在JavaScript中 ,使用具有讽刺意味的camelCased toLowerCase()
方法,此处显示的代码与第一个示例略有不同:
var sourceText = "And a Heaven in a Wild Flower";
sourceText = sourceText.toLowerCase();
console.log(sourceText);
> and a heaven in a wild flower
CSS Alternative: If the text was displayed in an element with a class
of auguries2
:
CSS替代 :如果文本显示在带有auguries2
class
的元素中:
.auguries2 { text-transform: lowercase; }
大写 (Capitalisation)
标题案例:将每个单词的首字母大写 (Title Case: Capitalize The First Letter Of Every Word)
This is best left to a JavaScript function:
这最好留给JavaScript 函数 :
function toTitleCase(str) {
return str.replace(/[^-'\s]+/g, function(word) {
return word.replace(/^./, function(first) {
return first.toUpperCase();
});
});
}
var concertTitle = "live-alive in łódź";
console.log(toTitleCase(concertTitle));
> Live-Alive In Łódź
This is the broadest function, correctly transforming letters with diacritics and characters after hyphens.
这是最广泛的功能,可以正确地将连音符号和连字符后的字母转换为字母。
In CSS: to capitalize the first letter of every word in all h1
elements:
在CSS中 :将所有h1
元素中每个单词的首字母大写:
h1 { text-transform: capitalize; }
句子大小写:将第一个单词的首字母大写 (Sentence Case: Capitalising the first letter of the first word)
So commonly needed that it is probably best to attach it to the string prototype, creating a new method:
因此,通常需要最好将它附加到字符串原型上,从而创建一个新方法 :
String.prototype.toSentenceCase = function() {
return this.charAt(0).toUpperCase() + this.slice(1);
}
To demonstrate it in the console:
在控制台中进行演示:
var auguries = "hold infinity in the palm of your hand";
console.log(auguries.toSentenceCase());
> Hold infinity in the palm of your hand
In CSS: use a combination of selectors; for example, to capitalize the first letter in every paragraph:
在CSS中 :使用选择器的组合; 例如,将每个段落的首字母大写:
p:first-letter { text-transform: uppercase; }
翻译自: https://thenewcode.com/114/JavaScript-Strings-Uppercase-Lowercase-and-Capitalization