如何使用Javascript处理每个字母?

2020/09/29 15:01 · javascript ·  · 0评论

我想提醒一个字符串的每个字母,但是我不确定该怎么做。

所以,如果我有:

var str = 'This is my string';

我希望能够分别警告T,h,i,s等。这仅仅是我正在研究的一个想法的开始,但是我需要知道如何分别处理每个字母。

我想使用jQuery,并考虑在测试字符串的长度后可能需要使用split函数。

有想法吗?

如果警报的顺序很重要,请使用以下命令:

for (var i = 0; i < str.length; i++) {
  alert(str.charAt(i));
}

如果警报的顺序无关紧要,请使用以下命令:

var i = str.length;
while (i--) {
  alert(str.charAt(i));
}

这可能远不止于此。只想贡献另一个简单的解决方案:

var text = 'uololooo';

// With ES6
[...text].forEach(c => console.log(c))

// With the `of` operator
for (const c of text) {
    console.log(c)
}

// With ES5
for (var x = 0, c=''; c = text.charAt(x); x++) { 
    console.log(c); 
}

// ES5 without the for loop:
text.split('').forEach(function(c) {
    console.log(c);
});

如何处理每个文本字母(带有基准)

https://jsperf.com/str-for-in-of-foreach-map-2

对于

经典的,迄今为止性能最强的一种如果您打算在性能关键的算法中使用它,或者它要求与浏览器版本具有最大的兼容性,则应使用此算法。

for (var i = 0; i < str.length; i++) {
  console.info(str[i]);
}

对于...的

for ... of是新的迭代器ES6大多数现代浏览器都支持。它在视觉上更具吸引力,并且不太容易出现输入错误。如果您打算在生产应用程序中使用该程序,则可能应该使用像Babel这样的编译器

let result = '';
for (let letter of str) {
  result += letter;
}

每次

功能方法。Airbnb批准这样做的最大缺点是split(),它会创建一个新数组来存储字符串的每个字母。

为什么?这执行了我们不变的规则。处理返回值的纯函数比副作用更容易推论。

// ES6 version.
let result = '';
str.split('').forEach(letter => {
  result += letter;
});

要么

var result = '';
str.split('').forEach(function(letter) {
  result += letter;
});

以下是我不喜欢的内容。

为...在

与for ... of不同,您得到字母索引而不是字母。它表现很差。

var result = '';
for (var letterIndex in str) {
  result += str[letterIndex];
}

地图

函数方法,这很好。但是,地图并不打算用于此目的。需要更改数组内部的值时应使用它,不是这种情况。

// ES6 version.
var result = '';
str.split('').map(letter => {
  result += letter;
});

要么

let result = '';
str.split('').map(function(letter) {
  result += letter;
});

纯JavaScript的一种可能的解决方案:

for (var x = 0; x < str.length; x++)
{
    var c = str.charAt(x);
    alert(c);
}

这里的大多数(如果不是全部)答案都是错误的,因为只要Unicode BMP(基本多语言平面)之外的字符串中有字符,它们就会中断这意味着所有表情符号都将被破坏

JavaScript 对所有字符串都使用UTF- 16 Unicode。在UTF-16中,超出BMP的字符由两部分组成,称为“ 代理 ”,此处的大多数答案将单独处理此类对的每个部分,而不是将其作为单个字符。

至少从2016年开始,现代JavaScript中的一种方法是使用新的String迭代器这是MDN的示例(几乎):

var string = 'A\uD835\uDC68B\uD835\uDC69C\uD835\uDC6A';

for (var v of string) {
  alert(v);
}
// "A"
// "\uD835\uDC68"
// "B"
// "\uD835\uDC69"
// "C"
// "\uD835\uDC6A"

你可以试试这个

var arrValues = 'This is my string'.split('');
// Loop over each value in the array.
$.each(arrValues, function (intIndex, objValue) {
    alert(objValue);
})

另一种解决方案...

var strg= 'This is my string';
for(indx in strg){
  alert(strg[indx]);
}

当我需要编写短代码或单行代码时,可以使用以下“ hack”:

'Hello World'.replace(/./g, function (char) {
    alert(char);
    return char; // this is optional 
});

这不会计算换行符,因此可以是好事或坏事。如果其中包括换行符替换:/.//[\S\s]/其他的俏皮话可能会看到可能使用.split()有很多问题

如果字符串包含unicode字符,则最好使用for ... of语句,因为字节大小不同。

for(var c of "tree 木") { console.log(c); }
//"𝐀A".length === 3

新的JS允许这样做:

const str = 'This is my string';
Array.from(str).forEach(alert);

您现在可以关键字中使用

    var s = 'Alien';
    for (var c in s) alert(s[c]);

简短的答案:Array.from(string)将为您提供您可能想要的内容,然后可以对其进行迭代或其他任何操作,因为它只是一个数组。

好吧,让我们试试这个字符串:abc|⚫️\n⚪️|👨‍👩‍👧‍👧

代码点是:

97
98
99
124
9899, 65039
10
9898, 65039
124
128104, 8205, 128105, 8205, 128103, 8205, 128103

因此,有些字符有一个代码点(字节),有些字符有两个或更多,并添加了换行符以进行额外的测试。

因此,测试后有两种方法:

  • 每个字节一个字节(每个代码点一个代码点)
  • 字符组(但不是整个家庭的表情符号)
string = "abc|⚫️\n⚪️|👨‍👩‍👧‍👧"

console.log({ 'string': string }) // abc|⚫️\n⚪️|👨‍👩‍👧‍👧
console.log({ 'string.length': string.length }) // 21

for (let i = 0; i < string.length; i += 1) {
  console.log({ 'string[i]': string[i] }) // byte per byte
  console.log({ 'string.charAt(i)': string.charAt(i) }) // byte per byte
}

for (let char of string) {
  console.log({ 'for char of string': char }) // character groups
}

for (let char in string) {
  console.log({ 'for char in string': char }) // index of byte per byte
}

string.replace(/./g, (char) => {
  console.log({ 'string.replace(/./g, ...)': char }) // byte per byte
});

string.replace(/[\S\s]/g, (char) => {
  console.log({ 'string.replace(/[\S\s]/g, ...)': char }) // byte per byte
});

[...string].forEach((char) => {
  console.log({ "[...string].forEach": char }) // character groups
})

string.split('').forEach((char) => {
  console.log({ "string.split('').forEach": char }) // byte per byte
})

Array.from(string).forEach((char) => {
  console.log({ "Array.from(string).forEach": char }) // character groups
})

Array.prototype.map.call(string, (char) => {
  console.log({ "Array.prototype.map.call(string, ...)": char }) // byte per byte
})

var regexp = /(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])/g

string.replace(regexp, (char) => {
  console.log({ 'str.replace(regexp, ...)': char }) // character groups
});

现在,您可以使用来迭代String中包含的各个Unicode代码点String.prototype[@@iterator],这将返回众所周知的Symbol类型Symbol.iterator的值-类似于数组的Object的默认迭代器(String在这种情况下)。

示例代码:

const str = 'The quick red 🦊 jumped over the lazy 🐶! 太棒了!';

let iterator = str[Symbol.iterator]();
let theChar = iterator.next();

while(!theChar.done) {
  console.log(theChar.value);
  theChar = iterator.next();
}

// logs every unicode character as expected into the console.

这适用于Unicode字符(例如表情符号或非罗马字符),这些字符会破坏传统结构。

参考:MDN链接到String.prototype @@ iterator

您可以像这样获得单个字符的数组

var test = "test string",
    characters = test.split('');

然后使用常规Javascript循环,否则您可以使用jQuery通过以下方式迭代字符串的字符:

var test = "test string";

$(test.split('')).each(function (index,character) {
    alert(character);
});

您可以使用将该字符串转换为chars数组split(),然后对其进行迭代。

const str = "javascript";
const strArray = str.split('');

strArray.map(s => console.log(s));

如果要在字符级别上对文本进行转换,并在最后返回转换后的文本,则可以执行以下操作:

var value = "alma";
var new_value = value.split("").map(function(x) { return x+"E" }).join("")

因此,步骤如下:

  • 将字符串拆分为字符数组(列表)
  • 通过函子映射每个角色
  • 将生成的字符数组连接到生成的字符串中

在ES6 / ES2015中,您可以使用遍历一个字符串iterators,如您在

符号迭代器MDN

var str = 'Hello';
var it = str[Symbol.iterator]();

for (let v of it) {
  console.log(v)
 }
 
//  "H"
//  "e"
//  "l"
//  "l"
//  "o"

这是一种声明式的样式有什么好处您不必担心如何访问字符串的每个元素。

在当今的JavaScript中,您可以

Array.prototype.map.call('This is my string', (c) => c+c)

显然,c + c表示您想要对c做的任何事情。

这返回

["TT", "hh", "ii", "ss", " ", "ii", "ss", " ",
"mm", "yy", " ", "ss", "tt", "rr", "ii", "nn", "gg"]

这应该可以在较旧的浏览器中使用,并且可以使用UTF-16字符(例如💩)。

这应该是最兼容的解决方案。但是,它的性能不如for循环。

我使用regexpu生成了正则表达式

var str = 'My String 💩 ';
var regEx = /(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])/g


str.replace(regEx, function (char) {
    console.log(char)
});

希望这可以帮助!

您可以像在数组中那样简单地对其进行迭代:

for(var i in txt){
    console.log(txt[i]);
}

您可以使用访问单个字符但是后一种方法不是ECMAScript的一部分,因此您最好选择前一种。str.charAt(index)str[index]

如果要为每个字符设置动画,则可能需要将其包装在span元素中;

var $demoText = $("#demo-text");
$demoText.html( $demoText.html().replace(/./g, "<span>$&amp;</span>").replace(/\s/g, " "));

我认为这是最好的方法,然后处理跨度。(例如,使用TweenMax)

TweenMax.staggerFromTo($ demoText.find(“ span”),0.2,{autoAlpha:0},{autoAlpha:1},0.1);

试试这个代码

    function myFunction() {
    var text =(document.getElementById("htext").value); 
    var meow = " <p> <,> </p>";
    var i;


    for (i = 0; i < 9000; i++) {

        text+=text[i] ;



    }

    document.getElementById("demo2").innerHTML = text;

}
</script>
<p>Enter your text: <input type="text" id="htext"/>

    <button onclick="myFunction();">click on me</button>
</p>
本文地址:http://javascript.askforanswer.com/ruheshiyongjavascriptchulimeigezimu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!