ฉันต้องการแจ้งเตือนตัวอักษรแต่ละตัวของสตริง แต่ฉันไม่แน่ใจว่าจะทำอย่างไร

ดังนั้นถ้าฉันมี:

var str = 'This is my string';

ฉันต้องการแยกเตือน T, h, i, s และอื่น ๆ นี่เป็นเพียงจุดเริ่มต้นของความคิดที่ฉันกำลังทำงานอยู่ แต่ฉันต้องรู้วิธีการประมวลผลจดหมายแต่ละฉบับแยกกัน

ฉันต้องการใช้ jQuery และคิดว่าฉันอาจต้องใช้ฟังก์ชั่นแยกหลังจากทดสอบความยาวของสตริง

ไอเดีย?

หากลำดับการแจ้งเตือนมีความสำคัญให้ใช้สิ่งนี้:

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

หากลำดับการแจ้งเตือนไม่สำคัญให้ใช้สิ่งนี้:

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

var str = 'This is my string';

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

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

<p>If the order of alerts matters, use <a href="#" onclick="matters()">this</a>.</p>

<p>If the order of alerts doesn't matter, use <a href="#" onclick="dontmatter()">this</a>.</p>

มันอาจจะมากกว่าแก้ไข เพียงแค่ต้องการมีส่วนร่วมกับโซลูชันง่ายๆอื่น:

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);
});

ทางออกหนึ่งที่เป็นไปได้ในจาวาสคริปต์บริสุทธิ์:

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

วิธีการประมวลผลตัวอักษรแต่ละตัว (พร้อมการวัดประสิทธิภาพ)

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

สำหรับ

คลาสสิกและไกลโดยเป็นหนึ่งเดียวกับที่ประสิทธิภาพมากที่สุด คุณควรไปกับสิ่งนี้หากคุณวางแผนที่จะใช้มันในอัลกอริทึมที่สำคัญด้านประสิทธิภาพหรือต้องใช้ความเข้ากันได้สูงสุดกับเวอร์ชันเบราว์เซอร์

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

สำหรับ ... ของ

สำหรับ ... ของคือES6ใหม่สำหรับตัววนซ้ำ สนับสนุนโดยเบราว์เซอร์ที่ทันสมัยที่สุด มันดึงดูดสายตามากขึ้นและมีแนวโน้มที่จะพิมพ์ผิดพลาดน้อยลง หากคุณกำลังจะสำหรับการนี้ในการประยุกต์ใช้การผลิตที่คุณควรจะใช้อาจ transpiler เหมือนบาเบล

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;
});

ต่อไปนี้เป็นสิ่งที่ฉันไม่ชอบ

สำหรับใน

ต่างจากสำหรับ ... ของคุณได้รับดัชนีตัวอักษรแทนตัวอักษร มันทำงานได้ค่อนข้างแย่

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;
});

ส่วนใหญ่ถ้าไม่ทั้งหมดของคำตอบที่นี่เป็นสิ่งที่ผิดเพราะพวกเขาจะทำลายเมื่อมีตัวละครในสตริงนอก Unicode BMP (Basic สื่อสารได้หลายภาษา Plane) นั่นหมายความว่าทุก Emoji จะถูกหัก

JavaScript ใช้UTF- 16 Unicode สำหรับสตริงทั้งหมด ใน UTF-16 อักขระที่อยู่นอกเหนือ BMP นั้นถูกสร้างขึ้นจากสองส่วนเรียกว่า " Surrogate Pair " และคำตอบส่วนใหญ่ที่นี่จะประมวลผลแต่ละส่วนของคู่เหล่านี้แยกกันแทนที่จะเป็นอักขระเดี่ยว

วิธีหนึ่งใน JavaScript ที่ทันสมัยตั้งแต่อย่างน้อยปี 2016 คือการใช้String iteratorใหม่ นี่คือตัวอย่าง (เกือบ) ตรงจาก 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]);
}

เมื่อฉันต้องการเขียนโค้ดสั้นหรือซับในฉันใช้ "แฮ็ค" นี้:

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

สิ่งนี้จะไม่นับบรรทัดใหม่เพื่อที่จะได้เป็นสิ่งที่ดีหรือไม่ดี หากคุณซึ่งจะรวมถึงการขึ้นบรรทัดใหม่แทนที่: กับ/./ /[\S\s]/อีกหนึ่งตอร์ปิโดที่คุณอาจเห็นอาจใช้.split()ซึ่งมีปัญหามากมาย

ใหม่ JS อนุญาตสิ่งนี้:

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

จะเป็นการดีกว่าถ้าใช้คำสั่ง for ... of หากสตริงมีอักขระยูนิโค้ดเนื่องจากขนาดไบต์แตกต่างกัน

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

คำตอบสั้น ๆ : Array.from(string)จะให้สิ่งที่คุณต้องการและจากนั้นคุณสามารถทำซ้ำมันหรืออะไรก็ตามที่เป็นเพียงอาร์เรย์

abc|⚫️\n⚪️|👨‍👩‍👧‍👧ตกลงขอลองกับข้อความนี้:

codepoints คือ:

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

ดังนั้นอักขระบางตัวจึงมี codepoint หนึ่งตัว (ไบต์) และบางตัวมีสองตัวขึ้นไปและมีการเพิ่มบรรทัดใหม่สำหรับการทดสอบเพิ่มเติม

ดังนั้นหลังจากการทดสอบมีสองวิธี:

• ไบต์ต่อไบต์ (codepoint ต่อ codepoint)
• กลุ่มตัวละคร (ไม่ใช่อิโมจิทั้งครอบครัว)

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
});

ตอนนี้คุณสามารถวนซ้ำจุดรหัส Unicode แต่ละอันที่อยู่ใน String โดยใช้String.prototype[@@iterator]ซึ่งจะส่งคืนค่าประเภทสัญลักษณ์ที่รู้จักกันดีSymbol.iterator- ตัววนซ้ำเริ่มต้นสำหรับวัตถุคล้ายอาร์เรย์ ( 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 เช่น emoji หรือตัวอักษรที่ไม่ใช่แบบโรมัน

อ้างอิง: MDN เชื่อมโยงไปยัง String.prototype

ตอนนี้คุณสามารถใช้ในคำหลัก

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

คุณสามารถหาอาเรย์ของตัวละครแต่ละตัวได้

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

จากนั้นวนซ้ำโดยใช้ Javascript ปกติมิฉะนั้นคุณสามารถวนซ้ำอักขระของสตริงโดยใช้ jQuery โดย

var test = "test string";

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

คุณสามารถแปลงสตริงนี้เป็นอาร์เรย์ของตัวอักษรโดยใช้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("")

ดังนั้นขั้นตอน:

• แยกสตริงออกเป็นอาร์เรย์ (รายการ) ของอักขระ
• แมปอักขระแต่ละตัวผ่าน functor
• เข้าร่วมอาร์เรย์ที่เป็นผลลัพธ์ของตัวอักษรเข้าด้วยกันเป็นสตริงผลลัพธ์

ใน 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)
});

หวังว่านี่จะช่วยได้!

คุณสามารถเข้าถึงตัวละครเดียวกับหรือstr.charAt(index) str[index]แต่วิธีหลังไม่ใช่ส่วนหนึ่งของ ECMAScript ดังนั้นคุณควรไปกับอดีต

หากคุณต้องการที่จะทำให้ตัวละครแต่ละตัวคุณอาจต้องห่อในองค์ประกอบช่วง;

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>